Can I make height 100% work like width 100%?

Question

Fiddle

I have two <div> s floated left inside a <section> . I am looking for the simplest way to get whichever <div> is shorter, in this case <div id="one"> to stretch its height to match the other ( <div id="two"> ). In the fiddle, you will see that <div id="one"> has a gray background, which I want to continue down to the bottom of the <section> . Any workarounds or whatever to get this done is great. But I don't want to use javascript to do this. Thanks.

HTML:

<section>
    <div id="one"><p>Lorem</p></div>
    <div id="two">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore</p>
    </div>
    <div class="clear"></div>
</section>

CSS:

section {
    width: 80%;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 5px;
}
#one, #two {
    float: left;
    width: 50%;
}
#one {
    background: rgb(230,230,230);
}
.clear {
    clear: both;
}

Answer 1

load jquery and add the following javascript

$(document).ready( function() {
    var x = $("#one").css('height');
    var y = $("#two").css('height');

    if(x > y) {
        $("#two").css('height', x);
    } else {
        $("#one").css('height', y);
    }
});

but incase you are allergic to JavaScript ... and would accept CSS3 you could try

section {
    display: flex;
    width: 80%;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#one, #two {
    display: flex;
    width: 50%;
    display: table-cell;
}

Answer 2

Here is a pure HTML and CSS solution for you. It uses a div with a class of "inner" to wrap your divs you want to match up. Some CSS is also added to make it behave like you want it to.

jsFiddle solution - pure HTML and CSS

HTML code:

<section>
<div class="inner">
    <div id="one">
        <p>Lorem</p>
    </div>
    <div id="two">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
            doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
            veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
            ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
            consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque
            porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
            adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore</p>
    </div>
</div>
<div class="clear"></div>

Answer 3

You can hack around the padding on the p in the #one div, but this will throw your text off in this div. I'm not sure how relevant it is with aligning to the other text, but it may help you out.

#one p {
padding: 9em;

}