JSFiddle - React, Tailwind, and code Playground

HTML

<script src="&quot;http://code.jquery.com/jquery-git.js"></script>
<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-git.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<h1>jQuery sortable bug</h1>
<p>Scroll down to see the sortable list. Bug occurs only after scrolling. <br>To see the bug drag an item from the left colum below the last item on the right column. The second item dragged will be showin ga drop target ABOVE the last item - not below.</p>
<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>

CSS

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

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

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

JavaScript

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