JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">    
    <div class="ui-widget g1">Just</div>
    <div class="ui-widget g1">some</div>
    <div class="ui-widget g2">ramdom</div>
    <div class="ui-widget g2">text</div>
    <div class="ui-widget g3">with</div>
    <div class="ui-widget g2">diferent</div>
    <div class="ui-widget g1">worlds</div>
    <div class="ui-widget g3">sizes</div>
    <div class="ui-widget g2">because</div>
    <div class="ui-widget g2">I</div>
    <div class="ui-widget g1">want</div>
    <div class="ui-widget g3">to</div>
    <div class="ui-widget g2">demonstrate</div>
    <div class="ui-widget g2">my</div>
    <div class="ui-widget g1">problem</div>
    <div class="ui-widget g1">with</div>
    <div class="ui-widget g2">flex</div>
    <div class="ui-widget g2">elements</div>
    <div class="ui-widget g3">and</div>
    <div class="ui-widget g1">cornering</div>
    <div class="ui-widget g2">those</div>
    <div class="ui-widget g3">elements</div>
    <div class="ui-widget g1">potatoes</div>
    <div class="ui-widget">:)</div>
</div>
<br/>
Click on those buttons below to change the container
<div class="buttons">
    <button id="b1">1</button>
    <button id="b2">2</button>
    <button id="b3">3</button>
</div>
<div id="debug"></div>
<div id="mouse"></div>

CSS

.container {
    display: flex;
    flex-wrap: wrap;
}

.ui-widget {
    flex: auto;
    white-space: nowarp;
    padding: 5px;
    background: gray;
    border: 1px solid;
}
.ui-corner-br { 
  -moz-border-radius-bottomright: 10px; 
  -webkit-border-bottom-right-radius: 10px; 
  -khtml-border-bottom-right-radius: 10px; 
  border-bottom-right-radius: 10px;
    background: green;
}
.ui-corner-bl { 
  -moz-border-radius-bottomleft: 10px; 
  -webkit-border-bottom-left-radius: 10px; 
  -khtml-border-bottom-left-radius: 10px; 
  border-bottom-left-radius: 10px; 
    background: green;
}
.ui-corner-tr { 
  -moz-border-radius-topright: 10px; 
  -webkit-border-top-right-radius: 10px; 
  -khtml-border-top-right-radius: 10px; 
  border-top-right-radius: 10px; 
    background: green;
}
.ui-corner-tl { 
  -moz-border-radius-topleft: 10px; 
  -webkit-border-top-left-radius: 10px; 
  -khtml-border-top-left-radius: 10px; 
  border-top-left-radius: 10px; 
    background: green;
}
.buttons {
    display: flex;
}
button {
    font-size: 48px;
    flex: auto;
    margin: 10px;
}

JavaScript

(function ($) {
    $.fn.closestToOffset = function(offset) {
        var el = null, elOffset, x = offset.left, y = offset.top, distance, dx, dxR, dy, dyB, minDistance;
        this.each(function() {
            elOffset = $(this).offset();
    
            if (
            (x >= elOffset.left)  && (x <= elOffset.right) &&
            (y >= elOffset.top)   && (y <= elOffset.bottom)
            ) {
                el = $(this);
                return false;
            }
    
            var offsets = [[elOffset.left, elOffset.top], [elOffset.right, elOffset.top], [elOffset.left, elOffset.bottom], [elOffset.right, elOffset.bottom]];
            for (off in offsets) {
                dx = offsets[off][0] - x;
                dxR = dx + $(this).width();
                dx = dx * dx > dxR * dxR ? dxR : dx;
                dy = offsets[off][1] - y;
                dyB = dy + $(this).height();
                dy = dy * dy > dyB * dyB ? dyB : dy;
                distance = Math.sqrt((dx*dx) + (dy*dy));
                if (minDistance === undefined || distance < minDistance) {
                    minDistance = distance;
                    el = $(this);
                }
            }
        });
        return el;
    };
})(jQuery);

var cw, ch, leftTR, flex;

var fun = function () {
    flex = $(".container");
    cw = flex.width(); // container width
    ch = flex.height(); // container height
    leftTR = flex.offset().left + cw;
//    var iw = flex.find(".ui-widget:visible").first().width();
//    var cnt = flex.find(".ui-widget:visible").length;
//    var col = Math.floor(cw / iw);
//    var row = Math.ceil(cnt / col);
    var tl = flex.find(".ui-widget:visible").first();
    var tr = flex.find(".ui-widget:visible").closestToOffset({left: leftTR, top: flex.offset().top});
    var bl = flex.find(".ui-widget:visible").closestToOffset({left: 0, top: ch});
    // those '20's are to to throw away from the others elements
    var br =...