JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
<div class="row">
<div class="cell" id="draggable">
  <h2>Draggable list</h2>
  <div class="container">
    <div class="item">
      <span>Draggable 1</span>
      <div class="container">
        <div class="item">
          <span>Draggable 1.1</span>
          <div class="container"></div>
        </div>
        <div class="item">
          <span>Draggable 1.2</span>
          <div class="container"></div>
        </div>
      </div>
    </div>
    <div class="item">
      <span>Draggable 2</span>
      <div class="container">
        <div class="item">
          <span>Draggable 2.1</span>
          <div class="container"></div>
        </div>
        <div class="item">
          <span>Draggable 2.2</span>
          <div class="container"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="cell" id="sortable">
  <h2>Sortable List</h2>
  <div class="container">
    <div class="item">
      <span>Sortable 1</span>
      <div class="container">
        <div class="item">
          <span>Sortable 1.1</span>
          <div class="container"></div>
        </div>
        <div class="item">
          <span>Sortable 1.2</span>
          <div class="container"></div>
        </div>
      </div>
    </div>
    <div class="item">
      <span>Sortable 2</span>
      <div class="container">
        <div class="item">
          <span>Sortable 2.1</span>
          <div class="container"></div>
        </div>
        <div class="item">
          <span>Sortable 2.2</span>
          <div class="container"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
</div>

CSS

div.table {
            display: table;
          }
          div.row {
            display: table-row;
          }
          div.cell {
            padding: 50px;
            display: table-cell;
          }         
          div.item {
            border: 1pt black solid;
          }
          div.container {
            margin-left: 10px;
            min-width: 100px;
            min-height: 10px;
          }
          div.placeholder {
            border: 1pt solid blue;
            background: blue;
            height: 3px;
            width: 50px;
          }

JavaScript

$(document).ready(function(){
            $( "#sortable .container" ).sortable({
              connectWith: "#sortable .container",
              placeholder: "placeholder",
              helper: "clone",
              toleranceElement: "span"
            });
            $("#draggable .item").draggable({
              connectToSortable: "#sortable .container",
              helper: "clone"
            });
          });