JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="element autosize">
sdfsd fsfd
sdfs dfsfd
sdfsd fsfd
sdfs dfsfd
sdfsd fsfd
</div>
<div class="element autosize">
sdfsd fsfd<br />
sdfsd fsfd<br /> sdfsd fsfd<br />
sdfsd fsfd<br />
</div>
<div class="element autosize">
sdfsd fsfd
sdfsd fsfd
sdfsd fsfd
sdfsdf sfd
sdfsd fsfd
sdfsd fsfd
sdfsd fsfd
</div>
<div class="element autosize">
sdfs df sfd
sdf sd fsf
sdfs dfs
sdfsdf sfd
</div>
<div class="element autosize">
sdfsd fsfd
sdfs dfsfd
sdf sdf sfd sdfsdf sfd
dfgdfg dfgdfgdfg dfgdfg dfgdfgd dfgdfgertefgdfgdfgdfgdfg
iopiopiopio iopiopiop
sdfsd fsfd
sdfs dfsfd
sdf sdf sfd sdfsdf sfd
dfgdfg dfgdfgdfg dfgdfg dfgdfgd dfgdfgertefgdfgdfgdfgdfg
iopiopiopio iopiopiop
</div>
</div>
CSS
.container {
border:1px solid #222;
float:left;
}
.element{
float: left;
width:20%;
border:1px dotted #222;
margin:5px;
}
.clear {clear:left;}
JavaScript
function autosizeit() {
var blocksPerRow = 0;
var maxHeight = 0;
var blockNum = 0;
var rowCount = 0;
$(".autosize").each(function() {
$(this).height('auto');
$(this).removeClass(function(index, css) {
return (css.match(/\bblock\S+/g) || []).join(' ');
});
$(this).removeClass(function(index, css) {
return (css.match(/\brow\S+/g) || []).join(' ');
});
});
var len = $(".autosize").length;
var blockWidth = $('.autosize').outerWidth(true);
var parentWidth = $('.autosize').parent().innerWidth(true);
var blocksPerRow = Math.floor(parentWidth / blockWidth);
var blockNum = 1;
$(".autosize").each(function(idx) {
$(this).addClass("block" + blockNum);
$(this).addClass("row" + rowCount);
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
if (blockNum * 1 == blocksPerRow) {
$(".row" + rowCount).height(maxHeight);
blockNum = blockNum * 1 * 0;
rowCount = rowCount * 1 + 1;
maxHeight = 0;
}
// Gets the height in case the number is less than three
if (idx == len - 1) {
$(".row" + rowCount).height(maxHeight);
}
blockNum = blockNum * 1 + 1;
});
}
autosizeit();