JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<div id="container">
<ul class="connectedSortable">
    <li class="ui-state-default">1</li>
    <li class="ui-state-default">5</li>
    <li class="ui-state-default">9</li>
</ul>
<ul class="connectedSortable">
    <li class="ui-state-default">2</li>
    <li class="ui-state-default">6</li>
    <li class="ui-state-default">10</li>
</ul>
<ul class="connectedSortable">
    <li class="ui-state-default">3</li>
    <li class="ui-state-default">7</li>
    <li class="ui-state-default">11</li>
</ul>
<ul class="connectedSortable">
    <li class="ui-state-default four">4</li>
    <li class="ui-state-default">8</li>
    <li class="ui-state-default">12</li>
</ul>
</div>

CSS

.connectedSortable { list-style-type: none; margin: 0; float: left;}
    .connectedSortable li { margin: 2px 2px 4px 2px; width: 100px; height:90px; font-size: 1.2em; }
    #container { width: 450px; }
    .connectedSortable li.four { height:190px }

JavaScript

$( ".connectedSortable" ).sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();