JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent" class="parent">
    <div id="list" class="list">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
</div>

CSS

.parent {
    height:64px;
    width:280px;
}
.list {
    background-color:#d0d0d0;
    white-space:nowrap;
    overflow-x:scroll;
    overflow-y:hidden;
    /*text-align:left;*/
}
.item {
    background-color:#404040;
    height:40px;
    width:100px;
    margin:4px;
    cursor:pointer;
    display:inline-block;
    /*float:left;*/
    /*float:none;*/
    /*clear:both;*/
}
.placeholder {
    height:40px;
    width:20px;
    display:inline-block;
    margin:4px;
}

.placeholder
{
    height: 1px !important;
}

JavaScript

$(function() {
    $('#list').disableSelection().sortable({
        scroll: true,
        placeholder: 'placeholder',
        //containment:'parent',
        axis: 'x'
    });
});