JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>

<div class="sep"></div>

<ul class="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>

CSS

.sortable {
    list-style-type: none;
}

.sortable li {
    margin: 0 3px 3px 3px; 
    padding: 0.1em 1.0em; 
    font-size: 1.4em;
}

.sep {
    border: 1px dashed red; 
    width:60%  margin: 15px;
}

.placeholder {
    border: 1px dotted black; 
    height: 26px;
}

JavaScript

$('.sortable').mousedown(function() {
    $(this).height($(this).height());
}).mouseup(function() {
    // $(this).height('auto');
}).sortable({
    connectWith: '.sortable',
    placeholder: 'placeholder',
});