JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="container" class="row">
<div class="col-sm-3 panel panel-info">test
<br />test
<br />test
<br />test
<br />test
<br />test</div>
<div class="col-sm-3 panel panel-info">test
<br />test
<br />test
<br />test
<br />test
<br />test
<br />test
<br />test
<br />test
<br />test</div>
<div class="col-sm-4 panel panel-info">test
<br />test
<br />test
<br />test
<br />test
<br />test
<br />test</div>
<div class="col-sm-4 panel panel-info">test
<br />test
<br />test
<br />test
<br />test</div>
<div class="col-sm-4 panel panel-info">test
<br />test
<br />test
<br />test
<br />test
<br />test</div>
</div>
JavaScript
equalheight = function (container) {
var currentRow = {
cols: [],
h: 0
};
var topPostion = -1;
$(container).each(function () {
var $el = $(this);
$($el).height('auto')
if (topPostion != $el.position().top) {
for (var j = 0; j < currentRow.cols.length; j++) {
currentRow.cols[j].height(currentRow.h);
}
topPostion = $el.position().top;
currentRow = {
cols: [],
h: 0
};
}
currentRow.cols.push($el);
if ($el.height() > currentRow.h) {
currentRow.h = $el.height();
}
});
for (var j = 0; j < currentRow.cols.length; j++) {
currentRow.cols[j].height(currentRow.h);
}
}
equalheight('.panel');
$(window).load(function () {
equalheight('.panel');
});
$(window).resize(function () {
equalheight('.panel');
});