Extending floated div height until the bottom of the parent div

Question

I have two divs that are floated left and right. They are inside a parent div with overflow hidden. Problem is, the one floated right is longer than the other and this other div doesn't extend until the bottom of the parent div so there's a huge patch of grey on the left.

Here's my code:

<div class="content">
 <div class="left">
    Blue Bottle pork belly messenger bag squid narwhal. Yr craft beer iPhone pug, flexitarian PBR&B retro chia wayfarers. Vice seitan DIY, mlkshk single-origin coffee mustache 8-bit butcher farm-to-table dreamcatcher distillery photo booth brunch aesthetic banjo.
 </div>

 <div class="right">
    Wolf forage flannel seitan, vinyl small batch authentic Etsy plaid swag. Ennui ugh fashion axe Helvetica normcore meggings, American Apparel leggings kale chips paleo scenester. Etsy try-hard photo booth, tousled bicycle rights swag Schlitz gentrify chia tattooed pork belly tofu. Raw denim pork belly squid, bespoke sartorial direct trade umami blog Etsy paleo 90's beard roof party letterpress bicycle rights. Butcher street art pour-over, Brooklyn Shoreditch semiotics yr fingerstache fixie Echo Park. Readymade irony gastropub ethical Pitchfork. Skateboard keytar vinyl, deep v lomo tofu gentrify gastropub try-hard Echo Park Cosby sweater Tumblr tote bag.
 </div>

 <div class="clear"></div>
</div>

Here's a fiddle of it.

Answer 1

You can add min-height to your .right and .left divs:

.left, .right{
    min-height:100px;  // or one can select 100% as per requirement
}

Answer 2

Option 1: Use a background gradient

http://dabblet.com/gist/2957349/857c8069b850252a5eaf3b06ad243b6f22632952 If you're looking for a purely asthetic fix up then you can consider a CSS gradient running down the parent (#content) to simulate the equal height of both divs

Option 2: There are other CSS/HTML options available

http://css-tricks.com/fluid-width-equal-height-columns/

Option 3: Use JS

http://css-tricks.com/equal-height-blocks-in-rows/

Option 4: Fix the height of the parent and columns with CSS

This however won't make it very flexible for varying amounts of text, but it's an option.