find the tallest divs

by Kiran Duggal

HTML

<div class="row">
    <div class="four columns">
        <div class="panel green">Dolores quos mollitia officia eget iusto ipsa consequuntur potenti quidem quasi harum repudiand</div>
    </div>
    <div class="four columns">
        <div class="panel green">Dolores quos mollitia officia eget iusto ipsa consequuntur potenti quidem quasi harum repudiandae non nam veritatis pede ipsa, parturient mauris deleniti, fringilla officiis felis parturient quis vero sollicitudin pretium cupiditate</div>
    </div>
    <div class="four columns">
        <div class="panel green">Dolores quos mollitia officia eget iusto ipsa consequuntur potenti quidem quasi harum repudiandae non nam ve is some more text just to make it longer.</div>
    </div>
</div>
<div class="row">
    <div class="four columns">
        <div class="panel green">Dolores quos mollitia officia eget iusto ipsa consequuntur potenti quidem quasi harum repudiandae nonminumenda nihil dolore in amet nostrud minus. <Se></Se>m lorem!</div>
    </div>
    <div class="four columns">
        <div class="panel green">Dolores quos mollitia officia eget iusto ipsa consequuntur potenti quidem quasi harum repudiandae non nam veritatis pede ipsa, parturient mauris deleniti, fringilla officiis felis parturient quis vero sollicitudin pretium cupiditate</div>
    </div>
    <div class="four columns">
        <div class="panel green">Dolores quos mollitia officia eget iusto ipsa consequuntur potenti quidem quasi harum repudiandae non nam veritatis pede ipsa, parturient mauris deleniti</div>
    </div>
</div>

CSS

.row { width: 100%; display: block; clear:both;}
.panel { border: 1px solid black; }
.four {
    float:left;
    background: #ccc;
    margin-right: 5px;
    width: 200px
}

JavaScript

$(function () {
    
    $('.row').each(function(){
        var $panels = $(this).find('.panel');
        var tallest = 0;
    
        //find tallest
        $panels.each(function () {
            var ph = $(this).height();
            if (ph > tallest) tallest = ph;
        });
    
        $panels.height(tallest);
    });
});