JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="double_column_list">
    <li><span>Awesome Stuff</span></li>
    <li><span>Awesome Stuff 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>

CSS

.double_column_list li {float: left; width: 50%;}

li span {
    display: block;
    margin: 2px;
    border: 1px solid black;
    padding: 2px;
}

JavaScript

var $ul = $('ul.double_column_list');
var listitems = $ul.children('li').get();
listitems.sort(function(a, b) {
   var compA = $(a).outerHeight(true);
   var compB = $(b).outerHeight(true);
   return (compA > compB) ? -1 : (compA < compB) ? 1 : 0;
})

$.each(listitems, function(idx, itm) { $ul.append(itm); });