JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/jquery/jquery-ui/master/ui/jquery.ui.core.js"></script>
<script src="https://raw.github.com/jquery/jquery-ui/master/ui/jquery.ui.widget.js"></script>
<script src="https://raw.github.com/jquery/jquery-ui/master/ui/jquery.ui.mouse.js"></script>
<script src="https://raw.github.com/jquery/jquery-ui/master/ui/jquery.ui.sortable.js"></script>
<div id="sortable">
    <div class="sortme">
        <h3 class="hndle">Box Title</h3>
            <ul>
                <li><label for="apple"><input name="food" type="radio" id="apple" value="apple"/> Apple</label></li>
                <li><label for="bacon"><input name="food" type="radio" id="bacon" value="bacon" checked="checked" /> Bacon</label></li>
                <li><label for="cookie"><input name="food" type="radio" id="cookie" value="cookie"/> Cookie</label></li>
            </ul>
        </div>

    <div class="sortme">
        <h3 class="hndle">Box Title</h3>
        Some useless text
    </div>
</div>

CSS

#sortable { padding: 10px;}

.sortme { background: #EEE; margin-bottom: 22px;}

.hndle { font-size: 112%; background: pink; cursor: move;}

JavaScript

$( "#sortable" ).sortable({ handle: '.hndle', helper: 'original' });