JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<ul id="mainSortable">
    <li class="container">
        <div class="header">
            <a class="delete" href="javascript:;">Delete<a>
            <div class="dropZone">Drop here</div>
            Item 1
        </div>
    </li>
    <li class="container">
        <div class="header">
            <a class="delete" href="javascript:;">Delete<a>
            <div class="dropZone">Drop here</div>
            Item 2
        </div>
    </li>
    <li class="container">
        <div class="header">
            <a class="delete" href="javascript:;">Delete<a>
            <div class="dropZone">Drop here</div>
            Item 3
        </div>
    </li>
</ul>

CSS

#mainSortable { 
    list-style: none; 
    padding: 0; 
}
#mainSortable li { 
    border: 1px solid black; 
    position: relative; 
    height: 60px;
    padding-right: 120px;
}
#mainSortable li { 
    background: lightblue; 
}
#mainSortable li a.delete {
    position: absolute;
    left: 5px;
    bottom: 5px;
    width: 50px;
    height: 16px;
    background: lightgray;
    text-decoration: none;
    color: green;
}

.dropZone { 
    position: absolute;
    right: 5px;
    top: 5px;
    width: 100px;
    height: 50px;
    border: 1px dashed blue; 
    background: lightgreen;
}

JavaScript

$("#mainSortable").sortable({
    toleranceElement: "> div"
});