JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="view-source:http://jqueryui.com/themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="view-source:http://jqueryui.com/demos/demos.css">
<div class="container">
    <fieldset>
        <legend>handle 1 works</legend>
        <div>blah<br /></div>
    </fieldset>
    <fieldset>
        <legend>handle 2 works</legend>
        <div>blah<br /></div>
    </fieldset>
</div>
<div class="container">
    <fieldset>
        <legend>handle 1 THIS CAN'T BE DRAGGED BELOW HANDLE 2</legend>
        <div>blah<br /></div>
    </fieldset>
    <fieldset>
        <legend>handle 2 BUT I CAN DRAG THIS ABOVE HANDLE 1</legend>
        <div style="display: none">blah<br /></div>
    </fieldset>
</div>
<div class="container">
    <fieldset>
        <legend>handle 1 works</legend>
        <div style="display: none">blah<br /></div>
    </fieldset>
    <fieldset>
        <legend>handle 2 works</legend>
        <div style="display: none">blah<br /></div>
    </fieldset>
</div>

CSS

fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}
.container{
    border: 1px solid red;
}

JavaScript

$(".container").sortable({
    axis: 'y',
    handle: '> legend',
    containment: 'parent',
    /*cursorAt: {top: 1},
    start: function(event, ui) {
        ui.placeholder.height(ui.item.height());
        $(this).sortable('refreshPositions');
    },*/
});