JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="unit-holder-middle">
    <div id="my-army">
      Drag these out of the box:<br/>
      <div class="draggable-unit">
      </div>
      <div class="draggable-unit">
      </div>
      <div class="draggable-unit">
      </div>
      <div class="draggable-unit">
      </div>
      <div class="draggable-unit">
      </div>
      <div class="draggable-unit">
      </div>
      <div class="draggable-unit">
      </div>
      <div class="draggable-unit">
      </div>
      <div class="draggable-unit">
      </div>
      <div class="draggable-unit">
      </div>
      </div>
    </div>
</div>

CSS

.unit-holder-middle {
    width: 100px;
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid red;
    overflow-y: auto;
}

#my-army {
    position: relative;
    overflow: visible;
    z-index: 2;
}

#my-army .draggable-unit {
    display: inline-block;
    position: relative;
    margin: 2px 6px 2px 2px;
    cursor: move;
    width: 45px;
    height: 45px;
    background: #ccc;
}

JavaScript

//drag-drop units from "my army" to battle positions
    function make_draggable(elem){
        $(elem).draggable({
            revert: "invalid",
            cursor: "move"
        });
    }
    
    make_draggable('.draggable-unit');