JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="clickable">A</div>
    <div class="clickable">B</div>
    <div class="clickable">C</div>
    <div class="clickable">D</div>
    <div class="clickable">E</div>
    <div class="clickable">F</div>
    <div class="clickable">G</div>
    <div class="clickable">H</div>
    <div class="clickable">I</div>
    <div class="clickable">J</div>
</div>
<button onclick="sort();">Sort</button>

CSS

.clickable
{
    width:100%;
    height: 20px;
    border: 1px solid #000;
    float: left;
    margin: 5px;
    cursor: pointer;
     transition: width 2s;
}

JavaScript

sort = function() {
    var len = clickSort.length;
    for (var i=0; i<len; i++)
    {
        $('#container').prepend( clickSort.pop() );
    }
    
};
clickSort = [];
$(document).ready(function() {
    $('.clickable').on('click', function() {
        clickSort.push( $(this) );
    });
});