How do I keep two divs or more that are side by side the same height?

<div>
    <div class="panel">
      Line 1
      Line 2
    </div>
    <div class="panel">
      Line 1<br/>
      Line 2<br/>
      Line 3<br/>
      Line 4<br/>
    </div>
    <div class="panel">
      Line 1
    </div>
    <div class="panel">
      Line 1
      Line 2
    </div>
</div>

<script type='text/javascript'>
$(document).ready(function(){ 
var heights = $("div.panel").map(function ()
 {
 return $(this).height();
 }).get(),

 maxHeight = Math.max.apply(null, heights) + 10;

 $("div.panel").css("height", maxHeight + "px");
});

</script>