JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sortable sortable1">
    <div>Item 1 1</div>
    <div>Item 1 2</div>
    <div>Item 1 3</div>
    <div>Item 1 4</div>
    <div>Item 1 5</div>
</div>
<p>asdf</p>
<div class="sortable sortable2">
    <div>Item 2 1</div>
    <div>Item 2 2</div>
    <div>Item 2 3</div>
    <div>Item 2 4</div>
    <div>Item 2 5</div>
</div>
<div class="sortable sortable3">
    <div>Item 2 1</div>
    <div>Item 2 2</div>
    <div>Item 2 3</div>
    <div>Item 2 4</div>
    <div>Item 2 5</div>
</div>

CSS

.sortable {
    padding: 2px;
    font-size: 12px;
    border: 1px solid #aaa;
    max-width: 250px;
}
.sortable div {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    margin: 2px;
    background: #fff;
    border: 1px solid #aaa;
    cursor: move;
}

JavaScript

$('.sortable1').sortable({
    connectWith: '.sortable2'
});

$('.sortable2').sortable({
    connectWith: '.sortable1'
});