JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<div class="someList p1">
    <div class="listItem aa">Things</div>
    <div class="listItem aa">Stuff</div>
    <div class="listItem aa">Items</div>
</div>
<div class="someList p2">
    <div class="listItem bb">Things</div>
    <div class="listItem bb">Stuff</div>
    <div class="listItem bb">Items</div>
</div>
<div class="someList p3">
    <div class="listItem cc">Things</div>
    <div class="listItem cc">Stuff</div>
    <div class="listItem cc">Items</div>
</div>

CSS

.someList {float:left; width:110px; height:300px; margin:2px; background-color:#00CC00;}
.listItem {width:100px; margin:2px; padding:2px;}
.aa {background-color:#AAAAAA;}
.bb {background-color:#BBBBBB;}
.cc {background-color:#CCCCCC;}

JavaScript

$(document).ready(function() {
   
    $(".someList").sortable({
        connectWith: '.someList',
        helper: 'clone',
        placeholder: 'ui-state-highlight',
        forcePlaceholderSize: true,
        update: function(event, ui) {
            
            // Get the width of the item and convert to amount of
            // lists it could cover
            var itemWidth = $(ui.item).width();
            switch(itemWidth) {
                case 100:
                    var numLists = 1;
                    break;
                case 214:
                    var numLists = 2;
                    break;
                case 328:
                    var numLists = 3;
                    break;
                default:
                    alert('You made it too big for this fiddle!');
                    break;
            }
            
            // Get the position of the list
            var posOfList = parseInt($(ui.item).parent().attr('class').split(/\s+/)[1].substring(1));
            
            // Get the item's index in the list it was dropped
            var itemDroppedIndex = $(ui.item).parent().children().index(ui.item);
            
            // Check we got all the right details (if ya wanna)
            // alert('itemWidth: ' + itemWidth + ', numLists: ' + numLists + ', posOfList: ' + posOfList + ', itemDroppedIndex: ' + itemDroppedIndex);
            
            // Shouldn't have to handle the multi-list items to 
            // the left because they will already have empty
            // placeholders. However, will those empty placeholders
            // get in the way? Might have to search for them and 
            // delete every time before the following re-ordering
            
            // Re-order the lists to the right of the current item
            // if it's bigger than one list and there are other
            // lists to the right
            if(numLists > 1 && posOfList < 3) {
                
                // My real...