JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="frame">
        <div class="tile">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
        <div class="tile">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
        <div class="tile">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
        <div class="tile">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
        <div class="tile">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    </div>
</div>

CSS

body { text-align: center; }

#container { width: 66%; display: inline-block; text-align: center; }


#frame { width: 100%; border: solid green 3px; display: inline-block; text-align: left; }

.tile { width: 100px; 
    border: solid red 3px;
    display: inline-block;
    margin: 8px;
}

JavaScript

/*
please note that due to bug in jQuery
outerWidth(true) returns smaller value,
so unclean correction (+2) was included.
Also note that browser wraps the tiles even surplus 4px are there, so there is a correction for that. Seems some tuning is needed here due to browser/jquery inaccuracy */


$(window).resize(function () {
    var w = $('#container').width() - 2*$('#frame').css('border-width') - 4/*- $('#frame').css('padding-left') - $('#frame').css('padding-right')*/;
    var t = $('#container .tile').first().outerWidth(true) + 2;
    var tile = $('#container .tile').first();
    var t2 = $('#container .tile').first().outerWidth();
    /*console.log('w: ' + w + ', t: ' + t + ', w/t' + (w/t) + ', dir: ' + $('#container .tile').first().width() + ', t2: ' + t2);*/
    var n = Math.floor(w/t);
    var new_width = n*t + 4;
    $('#frame').width(new_width);
});