JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <body>
    <div class='container'>
      <div class='inlineblock'></div><div class='inlineblock'></div><div class='inlineblock'></div>
    </div>

  </body>
</html>

CSS

body {
    text-align:center;
}
.container {
    display: inline-block;
    background-color: #aaa;
    text-align:left;
}
.inlineblock {
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: #eee;
}

JavaScript

$(document).ready((function(containerQuery) {
    var resize = function() {
        var container = $(containerQuery);
        container.each(resizeContainer);
    };
    var resizeContainer = function() {
        var container = $(this);
        var w_parent = container.parent().width();
        var w_contained = container.children().width();
        var fit_in_parent = Math.floor(w_parent / w_contained) || 1;
        //don't make the container larger than the number of children
        fit_in_parent = Math.min(fit_in_parent, 
                                 container.children().length);
        var w_container = w_contained * fit_in_parent;
        container.width(w_container);
    };
    $(document).ready(resize);
    $(window).resize(resize);
    
    //allow calling resize from outside 
    // (e.g. if we've just added or removed an element)
    window.forceResizeContainers = resize;
})('.container'));