JSFiddle - React, Tailwind, and code Playground

by Yandy Viera

HTML

<div id="container1" 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>

<div id="container2" class="container">
    <div class="item">Maudie </div>
    <div class="item">Remedios </div>
    <div class="item">Chaya B</div>
    <div class="item">Duncan</div>
    <div class="item">Lashonda </div>
</div>

<div id="container3" class="container">
    <div class="item">Maudie Mcmanus</div>
    <div class="item">Remedios </div>
    <div class="item">Chaya B</div>
    <div class="item">Duncan</div>
    <div class="item">Lashonda </div>
</div>

<div id="container4" class="container">
    <div class="item">Maudie</div>
    <div class="item">Remedio</div>
    <div class="item">Chaya B</div>
    <div class="item">Duncan</div>
    <div class="item">Lashond</div>
</div>

CSS

.container {
  width: 400px;
  overflow: hidden;
  margin-bottom: 20px;
}
.container .item {
  padding: 8px;
  border: 1px solid rgb(216, 213, 213);
  margin-right: 3px;
}
*{
  box-sizing: border-box;
}

JavaScript

$(document).ready(function() {
    Distribute($('#container1'));
    Distribute($('#container2'));
    Distribute($('#container3'));
    Distribute($('#container4'));
})

function Distribute($container){
    var $item = $container.children('.item');

    var initialWidth = $container.outerWidth();

    $container.css({     /*to allow it to fit its contents which is defined by the width of the widest element*/
        width: 'auto',
        display: 'inline-block'
    });

    var widestItemWidth = $container.outerWidth();     /*Now this is the width of the widest item*/
    var itemMargin= parseInt($item.css('margin-right'));

    var div = Math.floor(initialWidth / widestItemWidth);     /*this is to get as many items fit with the width of the widest element*/
    var itemWidth = initialWidth / div - itemMargin;      /*for the width of the item occupy the entire container*/

    /*if you don't want the items occupy the entire width of the container just use 'widestItemWidth' as width of $item*/

    $item.css({
        width: itemWidth,
        float: 'left'
    });
    $container.css({     /*restoring the initial styles*/
        width: initialWidth,
        display: 'block'
    });
}