Equal Height Divs using CSS and jQuery

HTML

<div id="col1">on one one one</div>
<div id="col2"> two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two twotwo two two two two two two two two two two two two two two two two two two two two two</div>
<div id="col3"> three three three</div>

CSS

#col1 {
    width: 30%;
    float: left;
    border: 1px solid orange;
}
#col2 {
    width: 30%;
    float: left;
    border: 1px solid red;
}
#col3 {
    width: 30%;
    float: left;
    border: 1px solid gray;
    background-color: #ae2;
}

JavaScript

$(function () {
    var h1 = $('#col1').height();
    console.log('h1 = ' + h1);
    var h2 = $('#col2').height();
    console.log('h2 = ' + h2);
    var h3 = $('#col3').height();
    console.log('h3 = ' + h3);
    
    var maxH = Math.max(h1, h2, h3)
    
    console.log('maxH is ' + maxH);
    $('div').height(maxH);
    
});