JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="set();">
<div id="parent">
  <div class="child">content</div>
  <div class="child">conthgnghnghent</div>
  <div class="child">conthnhgnent</div>
  <div class="child">contnhnhnhgnghnhgnhgnhent</div>
  <div class="child">contentnnhg</div>
  <div class="child">content</div>
</div>

CSS

.child{
    width: 250px;
    height: auto;
    float: left;
    padding: 10px 5px 10px 0px;
    background-color: #fff;
    position: absolute
  }
  #parent {
    width: 770px;
    height: auto;
    float: left;
    padding: 10px 0px 0px 10px;
    background-color: #fff;
    position: relative;
    overflow: none;
  }

JavaScript

var colWidth = 260; //based on container width
var margin = 5;//top margin
var window_Height = $(window).height();
var colCount = 3;

var blocks = [];
function alignBlocks() {
    $('.child').each(function(i){
        var min = Array.min(blocks);
        var index = $.inArray(min, blocks);
        var positionLeft = margin+(index*(colWidth+margin));
        var padleft = 2;
        $(this).css({
            'left':(positionLeft+padleft)+'px',
            'top':min+'px'
        });
        blocks[index] = min+$(this).outerHeight()+margin;
    });    
}

function divlayOut() {
    blocks = [];
    for(var i=0;i<colCount;i++)
    {
        blocks.push(margin);
    }
    alignBlocks();
}

Array.min = function(array) {
    return Math.min.apply(Math, array);
};