JSFiddle - React, Tailwind, and code Playground

by Ronen Cypis

HTML

<p>Without width:
    <div class="container">
        <div class="item">Maudie Mcmanus</div>
        <div class="item">Remedios Arrington</div>
        <div class="item">Chaya B</div>
        <div class="item">Duncan</div>
        <div class="item">Lashonda Tatum Walls</div>
    </div>
</p>

CSS

.container {
    width: 400px;
}
.container .column {
    display: inline-block;
    box-sizing: border-box;
    vertical-align: text-top;
}
.container .item {
    display: inline-block;
    padding: 8px;
    border: 1px solid rgb(216, 213, 213);
}

JavaScript

$(function(){
	var $items = $('.item');
   
    // detect the widest column's width
    var widestItemWidth = 0;
    $items.each(function(){
    	widestItemWidth = Math.max(widestItemWidth, $(this).width());
    });

    // calculate the number of columns
    var $container = $('.container');
    var containerWidth = $container.width();
    var numOfColumns = parseInt(containerWidth / widestItemWidth);
    
    // create the columns
    for(var i = 0; i < numOfColumns; i++){
    	$container.prepend('<div class="column"></div>');
    }
    var $columns = $('.column');
    $columns.css('width', (100/numOfColumns)+'%');

    // spread the items between the columns
    $items.each(function(i){
    	var columnIndex = i % numOfColumns;
        $(this).appendTo($columns.eq(columnIndex));
    });
});