JSFiddle - React, Tailwind, and code Playground

HTML

<div id="drag-kunst-alles">
    <ul class="sortable" style="overflow: scroll">
        <li>
            <p id='p1'>1</p>
        </li>
        <li>
            <p id='p2'>2</p>
        </li>
        <li>
            <p id='p3'>3</p>
        </li>
    </ul>
</div>
<div id="drag-kunst-in-lijst">
    <ul class="sortable">
        <li>
            <p id='p1'>10</p>
        </li>
        <li>
            <p id='p2'>11</p>
        </li>
        <li>
            <p id='p3'>12</p>
        </li>
        <li>
            <p id='p1'>13</p>
        </li>
        <li>
            <p id='p2'>14</p>
        </li>
        <li>
            <p id='p3'>15</p>
        </li>
        <li>
            <p id='p1'>16</p>
        </li>
        <li>
            <p id='p2'>17</p>
        </li>
        <li>
            <p id='p3'>18</p>
        </li>
    </ul>
</div>

CSS

#drag-kunst-alles {
	    height: 165px;
	    border: 1px solid #ccc;
	}
	#drag-kunst-in-lijst {
	    position:absolute;
        top:200px;
	    width: 365px;
	    height: auto;
	    border: 1px solid #000;
	}
	#drag-kunst-alles ul {
	    list-style-type: none;
	    margin: 0px;
	    height: 145px;
	    overflow: auto;
	}
	#drag-kunst-in-lijst ul {
	    list-style-type: none;
	    margin: 0px;
	    overflow: auto;
	}
	.sortable li {
	    float: left;
	    margin: 10px;
	    padding: 0px;
	    width: 100px;
	    height: 100px;
	    border: 1px solid #333;
	    cursor: move;
	}
	.sortable li.selected {
	    border: 1px solid #0f0;
	}

JavaScript

jQuery("#drag-kunst-in-lijst ul, #drag-kunst-alles ul").sortable({
	    connectWith: '.sortable',
	    delay: 100,
	    scroll: false,
	    cursor: 'move',
	    start: function (event, ui) {
	        //jQuery("#drag-kunst-alles").css("overflow", "hidden");
	    },
	    stop: function (event, ui) {
//jQuery("#drag-kunst-alles").css("overflow", "scroll");
	    }
	});