根据另一个调整div的高度

Question

Is it possible to resize right div to the height of left one using just CSS?
My Example

I've tried a jQuery approach like this:

$(document).ready(function () {
   $("#right").css("height", $("#left").height());
});

This approach isn't working well because I have dynamically loaded content in the left div and jQuery approach sometimes miscalculates the height.

I also tried height:100% on the right div but it didn't work.

Answer 1

For this you can use display:table property for this. Write like this:

#left{
    margin-right: 15px;
    width: 425px;
    background-color:#11DD52;
}

#right{
    width:200px;
    background-color:#4477AA;
}
#left, #right{
  display:table-cell;
}

Check this http://jsfiddle.net/ZZBM5/

Answer 2

EDIT: If you love hacky way of doing things, @sandeep created this great workaround.

I ended up using this great jQuery resize plugin. I was hoping there is an easy CSS solution, but the couple of answers in the comments above give me additional browser compatibility issues.
This is what I've done:

$("#left").resize(function () {
    $("#right").css("height", $(this).height());
});