Stretch a floating div vertically

Question

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.