JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

    <div id="left-pane" class="pane">
        <div class="item">Item A</div>
        <div class="item">Item B</div>
        <div class="item">Item C</div>
        <div class="item">Item D</div>
    </div>

    <div id="right-pane" class="pane">
        <div class="item">Item E</div>
        <div class="item">Item F</div>
        <div class="item">Item G</div>
        <div class="item">Item H</div>
    </div>
</div>

CSS

#container {
    height: 300px;
    overflow: hidden;
}
.item {
    border: 1px solid black;
    width:200px;
    padding: 50px 5px;
}

.pane{
    width:50%;
    height: 100%;
    float: left;
    display: inline-block;
    overflow-y: auto;
    overflow-x: hidden;
}
#left-pane {
    background-color: lightblue;
}
#right-pane {
    background-color: lightgreen;
}

JavaScript

$('.item').draggable({
  helper: 'clone',
  appendTo: '#container',
  cursor: 'move'
});
$('.item').droppable();