JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">

<div id="List1">
    <div>Item1</div>
    <div>Item2</div>
    <div>Item3</div>
    <div>Item4</div>
    <div>Item5</div>
    <div>Item6</div>
    <div>Item7</div>
    <div>Item8</div>
    <div>Item9</div>
    <div>Item9</div>
    <div>Item9</div>
    <div>Item9</div>
    <div>Item9</div>
    <div>Item9</div>
    <div>Item9</div>
    <div>Item9</div>
    <div>Item9</div>
    <div>Item9</div>
</div>

<div id="List2">
    <div>Item1</div>
</div>
</div>

CSS

#wrapper{
    height: 500px;
    overflow: auto;
}

#List1, #List2
{
    width: 200px;
    float: left;
    border: solid 2px black;
    margin-bottom: 20px;
    padding-bottom: 50px;
    height:100%;
}

#List1 > DIV, #List2 > DIV
{
    height: 50px;
    border: solid 1px red;
}

JavaScript

$(function(){
    var sortlists = $("#List1, #List2").sortable(
    {
        appendTo: 'body',
        tolerance: 'pointer',
        connectWith: '#List1, #List2',
        revert: 'invalid',
        forceHelperSize: true,
        helper: 'original',
        scroll: true
    });
});