JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<div id="sortableArea">
    <div class="sortable">
       
        <div class="sortable sortableItem">
             <div class="sortableItem">SortbleItem 1</div>

            <div class="sortableItem">SortbleItem 2</div>
            <div class="sortableItem">SortbleItem 3</div>
            <div class="otherItem">Other item</div>
        </div>
        
       
        
    </div>

</div>

CSS

#draggable-items 
        {
            float:left;
            width:150px;
            margin-right:50px;
        }
        #sortableArea 
        {
            float:left;
            border:1px solid #000;
            width:500px;
            padding:10px;
        }
        
        .dragMe { background-color:#ccc; border:1px solid #eee; margin-bottom:10px; }
        
        .placeholder {  background-color: #fbec88 !important; height: 5px;}
        
        .sortable { border:1px solid #ccc; margin:10px; padding:10px; }
        .sortableItem { padding:10px; }

JavaScript

$(function () {
           $("#sortableArea > .sortable").sortable({
                items: ".sortableItem",
           }).disableSelection();
    
           $("#sortableArea > .sortable > .sortable").sortable({
                items: ".sortableItem, .otherItem",
              
           }).disableSelection();
           
        });