JSFiddle - React, Tailwind, and code Playground

HTML

<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

<div class='sortable-list'>
    <div class='sortable-list-item'>Item1</div>
    <div class='sortable-list-item'>Item2</div>
    <div class='sortable-list-item'>Item3</div>
</div>
<div class='sortable-list'>
    <div class='sortable-list-item'>Item1</div>
    <div class='sortable-list-item'>Item2</div>
    <div class='sortable-list-item'>Item3</div>
</div>

CSS

.sortable-list {
    border: solid 1px black;
    height: 250px;
    margin-left: 5px;
    overflow-y: auto;
    overflow-x: hidden;
    display: inline-block;
    margin-top:100%;
}

.sortable-list-item {
    border: solid 1px red;
    height: 50px;
    width: 100px;
}

.sortable-placeholder {
    background-color: #ebebeb;
}

JavaScript

var sortlists = $('.sortable-list').sortable({
  tolerance: 'pointer',
  connectWith: '.sortable-list',
  placeholder: 'sortable-placeholder sortable-list-item'
});