JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="arrange">
        This is a medium sized element with a few lines of text in it.<br>
        It should be in second place.<br>
        Nothing special.
    </div>
    
    <div class="arrange">
        This is a small element. one line.
    </div>
    
    <div class="arrange">
        This is a huge block with a lot in it.<br>
        It shoudl be first in the list when rearranged.<br>
        Because it has a higher height than the others<br>
        So on load we check heights<br>
        And go from tallest to shortest.
    </div>
</div>

CSS

.arrange{
    width:150px;
    float:left;
    border:1px solid #000;
    padding:5px;   
}

JavaScript

var arrange = {
    elements: new Array(),
    sorted: new Array(),
    rearrange: function(){
        $('.arrange').each(function(){
            arrange.elements.push(new Array($(this).height(), $(this).clone()));
            
        });
        
        this.process();
        
        $('#container').html('');
        
        for(var i = 0; i < arrange.sorted.length; i ++)
        {
           $('#container').append(arrange.sorted[i]);
        }
    },
    process: function()
    {
        var current = 0;
        var elem = null;
        var index = 0;
        for(var i = 0; i < arrange.elements.length; i ++)
        {
          if(arrange.elements[i][0] > current)
          {
              current = arrange.elements[i][0];
              elem = arrange.elements[i][1];
              index = i;
          }
        }
        
        arrange.sorted.push(elem);
        arrange.elements.splice(index, 1);
        
       if(arrange.elements.length > 0)
            arrange.process();
    }
};

$(document).ready(function(){
    arrange.rearrange();
});