JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scroll_pane">
    <div class="widget_box" id="a11">1</div>
    <div class="widget_box" id="a22">2</div>
    <div class="widget_box" id="a33">3</div>
</div>

CSS

#scroll_pane {
    float: right;
    width: 500px;
    height: 100px;
    background-color: #d3d3d3;
}

.widget_box {
    float: right;
    position:relative;
    height: 100%;
    width:100px;
    border: 1px solid black;
    background-color: #a9a9a9;
}

JavaScript

$('#scroll_pane').sortable({
    items: '.widget_box',
    tolerance: 'pointer',
    containment: '#scroll_pane'
});