JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<ul id="sortable1" class="connect">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 3.1</li>
    <li>Item 3.2</li>
</ul>
<ul id="sortable2" class="connect">
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 3.1</li>
    <li>Item 3.2</li>
</ul>

CSS

.ui-sortable { list-style: none; padding: 0; }
.ui-sortable li { width:100px; float:left; border: 1px solid black; }

.connect{overflow:hidden;margin-top:20px;}

JavaScript

$("#sortable1").sortable({
    connectWith: ".connect"
});
$("#sortable2").sortable({
    connectWith: "#sortable1"
});