JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css">
<ul id="label-copy-list">
    
    <li>
        <fieldset class="sort-header"><legend><strong>Content 1</strong> <small>(double click to show)</small></legend>
            <div class="sort-hidden">Some Content</div>
        </fieldset>
    </li>
    
    <li>
        <fieldset class="sort-header"><legend><strong>Content 2</strong> <small>(double click to show)</small></legend>
            <div class="sort-hidden">Some Content</div>
        </fieldset>
    </li>
    
    <li>
        <fieldset class="sort-header"><legend><strong>Content 3</strong> <small>(double click to show)</small></legend>
            <div class="sort-hidden">Some Content</div>
        </fieldset>
    </li>
    
    <li>
        <fieldset class="sort-header"><legend><strong>Content 4</strong> <small>(double click to show)</small></legend>
            <div class="sort-hidden">Some Content</div>
        </fieldset>
    </li>
    
    <li>
        <fieldset class="sort-header"><legend><strong>Content 5</strong> <small>(double click to show)</small></legend>
            <div class="sort-hidden">Some Content</div>
        </fieldset>
    </li>
    
</ul>

CSS

body { background: #f5f7e7; color: #777; }

#label-copy-list { width: 500px; }
.sort-header { font-size: 20px; }
.sort-header, .sort-hidden {
    border-radius: 1em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border: #dee0cf 1px solid;
    padding: 5px;
}
.sort-hidden {
    display: none;
    height: 300px;
    background: #a0c7f5;
    color: #000;
    padding: 5px;
}

JavaScript

$(document).ready(function(){
    $('#label-copy-list')
        .sortable()
        .find('.sort-header').dblclick(function(){
            $(this).find('.sort-hidden').toggle();
            return false;
        })
})