JSFiddle - React, Tailwind, and code Playground

by Eric

HTML

<ul class="first">
    <li><span>Awesome Stuff
        Awesome Stuff
        Awesome Stuff
        Awesome Stuff
        Awesome Stuff
    </span></li>
    <li><span>Awesome Stuff
        Awesome Stuff
        Awesome Stuff
        Awesome Stuff
    </span></li>
    <li><span>Awesome Stuff
        Awesome Stuff
        Awesome Stuff
        Awesome Stuff
    </span></li>
    <li><span>Awesome Stuff</span></li>
    <li><span>Awesome Stuff</span></li>
</ul>
<div id="myDiv"></div>

<ul class="second">

CSS

.first, .second {
     float: left;
  width: 50%;  
}
li span {
    display: block;
    margin: 2px;
    border: 1px solid black;
    padding: 2px;
}

JavaScript

$.fn.sum = function() {
    var total = 0;
    this.each(function() { total += this; });
    return total;
};
$.fn.mask = function(mask) {
    return this.filter(function(i) {
        return (mask >> i) & 1;
    })
}

var sizes = $('.first li').map(function() { return $(this).outerHeight() });

var total = sizes.sum();
var maxTotal = total / 2;

var best = {
    total: 0,
    mask: 0
}

//Use an integer mask, where the nth bit represents
//whether the nth element in the set should be used

for (var subsetMask = 1; subsetMask < (1 << sizes.length); subsetMask++) {
    //Sum all the heights in this subset
     var partialTotal = sizes
         .mask(subsetMask)
         .sum()

    //New optimal solution?
    if (partialTotal > best.total && partialTotal <= maxTotal) {
        best = {
            total: partialTotal,
            mask: subsetMask
        };
    }
}

$('.first li').mask(best.mask).appendTo('.second');