JSFiddle - React, Tailwind, and code Playground
HTML
<div id="posts">
<div style="width:250px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:100px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:170px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:120px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:110px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:130px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:140px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:180px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:190px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:210px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:90px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
<div style="width:150px;background: #ccc;height:20px;margin:3px;"></div>
</div>
CSS
div div { float:left }
JavaScript
var lisInRow = 0;
var lisInRow2 = 0;
$('div div').each(function() {
if($(this).prev().length > 0) {
if($(this).position().top != $(this).prev().position().top) return false;
lisInRow++;
$(this).addClass("row1");
//console.log($(this).prev().length)
}
else {
lisInRow++;
$(this).addClass("row1");
}
});
var itemNumber = $(".row1").length
//console.log(lisInRow);
var widthRow = 0;
$('.row1').each(function() {
widthRow += $(this).outerWidth( true );
});
var widthContainer = $("#posts").width();
var remaining = widthContainer - widthRow;
leftMargin = Math.floor(remaining / itemNumber);
$(".row1").each(function(){
var addedwidth = $(this).width() + leftMargin;
$(this).width(addedwidth);
$(this).find("img").width(addedwidth);
});