JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="box">Box 1 Bigger</div><div class="box">Box 2</div><div class="box">Box 3 Random</div><div class="box">Box 4</div><div class="box">Box 5 Stuff</div>
</div>

CSS

.breaker {
    display: inline-block;
}
.box {
    display: inline-block;
    padding: 20px 40px;
    border: 1px solid #999;
    vertical-align: top;
    background: grey;
}

JavaScript

function betterBreak(container) {
        var boxes = $(container).children(),
            sum = 0, max = 0;
        boxes.map(function(x, box) { max += $(box).outerWidth(); });
        boxes.each(function(x, box) {  
            sum += $(box).outerWidth();
            if(sum > max/2) {
                var breakerBig = $('<div class="breaker"></div>'),
                    breakerSmall = $('<div class="breaker"></div>');
                boxes.slice(x).appendTo(breakerBig);
                boxes.slice(0,x).appendTo(breakerSmall);
                $(container).append(breakerSmall).append(breakerBig);
               return false;
            }
        });
    }

betterBreak('#container');