JSFiddle - React, Tailwind, and code Playground

by harley77

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 />
    </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
    </div>
    
    
    
    
    

</div>

CSS

.container {
  
    width:640px;
    border:1px solid #222;
    float:left;
}
.element{
    float: left;
    width:200px;
    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();