JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<div id="outer-container">
    <ul class="sortableList">
        <li>Drag 1</li>
        <li>Drag 2</li>
        <li>Drag 3</li>
        <li>Drag 4</li>
        <li>Drag 5</li>
        <li>Drag 6</li>
        <li>Drag 7</li>
        <li>Drag 8</li>
        <div id="outerDiv">
            <li>Drag 9
                <button id="collapsable">click here to collapse</button>
                <li id="contain">
                    <ul class="sortableSubList">
                        <li>Drag ul-1</li>
                        <li>Drag ul-2</li>
                        <li>Drag ul-3</li>
                        <li>Drag ul-4</li>
                        <li>Drag ul-5</li>
                        <li>Drag ul-6</li>
                        <li>Drag ul-7</li>
                        <li>Drag ul-8</li>
                        <li>Drag ul-9</li>
                    </ul>
                </li>
            </li>
        </div>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
    </ul>
</div>

CSS

ul ul li {
    background-color:yellow;
    border:solid 1px;
    margin:0px !important;
    padding:0px !important;
}
.sortableList {
    max-height:200px;
    overflow-y:scroll;
    width:300px;
    margin-bottom: 5px;
}
.sortableSubList {
    margin-left:0px;
    padding-left:10px;
}
ul li {
    background-color:green;
    border:solid 1px;
}
.setHeight {
    height: 20px !important;
}

JavaScript

var isLayerExpanded = false;
$(".sortableList").sortable({
    axis: 'y',
    containment: 'parent',
    tolerance: 'pointer',
    distance: 5,
    start: function (event, ui) {
        $(ui.item).find('#contain').hide(10, 'swing');
        $(ui.item).addClass('setHeight');
        ui.placeholder.height(ui.item.height());
        $(".sortableList").sortable('refresh');
    },
    stop: function (event, ui) {
        $('#contain').show(10, 'swing');
        $(ui.item).removeClass('setHeight');
    }

});
$(".sortableSubList").sortable({
    axis: 'y',
    containment: '#contain'

});
$('#collapsable').click(function () {
    if (!isLayerExpanded) {
        $('#contain').hide(250, 'swing');
    } else {
        $('#contain').show(250, 'swing');
    }
    isLayerExpanded = !isLayerExpanded;
});