Floated elements 100% height dynamic wrapper

I have 2 columns within a wrapper. One column is taller than the other. I would like the shorter column given a height of 100% so that it matches the taller column. All heights are dynamic so can not be defined in pixels.

DEMO http://ift.tt/1fS3d0T

<div class="wrapper">
    <div class="col1"> short column // not much content </div>
    <div class="col2"> tall columns // lots of content </div>
</div>

You will see in the example the red column is taller than the blue column. How do i set the blue column to 100% height of the wrapper.

I know I can easily do this by defining a height, this isn't an option. I can also do this if I use tables for layout, which I do not want to do. I can also do this by using javascript to get the height from the tall column and then set the height of the smaller column. I would like a CSS only approach though. Thanks.