JSFiddle - React, Tailwind, and code Playground

HTML

<div class="viscous"> 

    <div class="box" style="background:#f00"></div>
    <div class="box" style="background:#0f0"></div>
    <div class="box" style="background:#00f"></div>
    <div class="box" style="background:#ff0"></div>
    <div class="box" style="background:#0ff"></div>
    <div class="box" style="background:#f0f"></div>
    <div class="box" style="background:#500"></div>
    <div class="box" style="background:#050"></div>
    <div class="box" style="background:#005"></div>
    <div class="box" style="background:#550"></div>
    <div class="box" style="background:#055"></div>
    <div class="box" style="background:#505"></div>
    <div class="box" style="background:#f00"></div>
    <div class="box" style="background:#0f0"></div>
    <div class="box" style="background:#00f"></div>
    <div class="box" style="background:#ff0"></div>
    <div class="box" style="background:#0ff"></div>
    <div class="box" style="background:#f0f"></div>
    <div class="box" style="background:#500"></div>
    <div class="box" style="background:#050"></div>
    <div class="box" style="background:#005"></div>
    <div class="box" style="background:#550"></div>
    <div class="box" style="background:#055"></div>
    <div class="box" style="background:#505"></div>
        <div class="box" style="background:#f00"></div>
    <div class="box" style="background:#0f0"></div>
    <div class="box" style="background:#00f"></div>
    <div class="box" style="background:#ff0"></div>
    <div class="box" style="background:#0ff"></div>
    <div class="box" style="background:#f0f"></div>
    <div class="box" style="background:#500"></div>
    <div class="box" style="background:#050"></div>
    <div class="box" style="background:#005"></div>
    <div class="box" style="background:#550"></div>
    <div class="box" style="background:#055"></div>
    <div class="box" style="background:#505"></div>
    <div class="box" style="background:#f00"></div>
    <div class="box"...

CSS

/* customize as needed */
.box { width: 150px; min-height: 150px; padding: 8px; }

/* required */
.viscous { position: relative; overflow: hidden; }
.viscous-block { position: absolute; z-index: 0; margin-right: 8px; background-color: #eee; padding: 8px; margin-bottom: 8px; }
.viscous-block-last { margin-right: 0; background-color: #ccc; }

JavaScript

/*!
*** viscous ***/

(function( $ ) {

    $.fn.viscous = function( method ) {

        var defaults = {
            blockSelector: "> *",
            animate: false,
            realTimeResize: false,
            normalizeWidth: true,
            onLayout: function( renderingPass ) { }
        };

        var methods = {
            init: function( options ) {
                return this.each( function() {
                    var $obj = $( this );

                    if ( $obj.data( "viscousContext" ) != null ) {
                        return; // avoid double bind
                    }

                    var context = $.extend( {}, defaults, options );
                    $obj.data( "viscousContext", context ).addClass( "viscous" );

                    var blocks = [];
                    var rawBlocks = $( context.blockSelector, $obj );

                    for ( var i = 0; i < rawBlocks.length; i++ ) {
                        blocks[i] = $( rawBlocks[i] ).addClass( "viscous-block" );
                        blocks[i].originalWidth = blocks[i].outerWidth();
                        blocks[i].originalHeight = blocks[i].outerHeight();
                        blocks[i].css( "width", "auto" ); // set this AFTER h/w has been obtained
                    }

                    function layout( renderingPass ) {
                        if ( !$obj.is( ":visible" ) ) return;

                        var containerWidth = $obj.width();
                        var row = [];
                        var totalHeight = 0;
                        var rowLeft = 0;
                        var batch = [];

                        function layoutRow() {
                            // is there a gap to meet 100%?
                            var widthDelta = containerWidth - rowLeft;
                            var distributed = Math.floor( widthDelta / row.length );
                            var x = 0;

                            while ( widthDelta - ( distributed *...