JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Click Me to Equalize</h1>
<div style="height:100px; background-color: #f00;"></div>
<div style="height:150px; background-color: #f00;"></div>
<div style="height:70px; background-color: #00f;"></div>
<div style="height:180px; background-color: #0f0;"></div>
<div style="height:130px; background-color: #f00;"></div>
CSS
div { float:left; width:50px; margin: 10px 10px; }
JavaScript
(function($) {
String.prototype.capitalize = function() {
return this.replace(/^(.)/, function (c) { return c.toUpperCase(); })
};
$.fn.equalize = function(hw) {
if (!hw) {
hw = 'height';
}
var max = 0;
var prop = (typeof document.body.style.maxHeight != 'undefined' ? 'min' + hw.capitalize() : hw);
var offset = 'offset' + hw.capitalize();
this.each(function() {
var calc = parseInt(this[offset]);
if (calc > max) {
max = calc;
}
});
this.each(function() {
$(this).css(prop, max - (parseInt(this[offset]) - $(this)[hw]()));
});
return max;
};
$(document).ready(function() {
$('div').click(function() {
var newHeight = $('div').equalize('height');
$('h1').text('Height = ' + newHeight);
});
});
})(jQuery);