Stretch a floating div vertically

Stretch a floating div vertically

I have two DIVs created inside of an empty DIV that has float assigned to
it. Description and layout of the page is shown here.
HTML:
<div id="new_div">
<div class="home">
<h3 class="featurework">Header</h3>
<h4 class="featureworktitle">Sub-header</h4>
<img class="featureworkimg" src="img/featured-rms.jpg"
alt="lilo">
</div>
<div class="home-description">
<p class="home">Description section</p>
<p class="home-viewproject"><a href="#" target="_blank">Link
&raquo;</a></p>
</div>
</div>
CSS:
#new_div {
width: 100%;
}
div.home {
width: 50%;
float:left;
background:#1ABC9C;
}
div.home-description {
width: 50%;
float:left;
-moz-box-flex: 1;
-ms-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
display: -webkit-box;
display:box;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
-webkit-box-orient: vertical;
box-orient: vertical;
background:#1ABC9C;
padding:180px 0 0 0;
}
Div class home and home-description are floated to the left with a width
of 50%. My issue is that home-description div is not stretching to the
height of the previous div declared. I know there's been a big issue of
this circulating the internet of other web developers having similar
problem fixing this issue. Most of them have managed to fix the problem as
their content is just 1 column. Unlike theirs, mine is 2 columns floated
to the left.
Have a look at the link provided above for better clarification.