JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">

    <div id="sidebar">

        <ul>

            <li class="part">Part</li>

            <li class="drag-element">Element 1<ul class="part-holder"></ul></li>
            <li class="drag-element">Element 2<ul class="part-holder"></ul></li>
            <li class="drag-element">Element 3<ul class="part-holder"></ul></li>
            <li class="drag-element">Element 4<ul class="part-holder"></ul></li>
            <li class="drag-element">Element 5<ul class="part-holder"></ul></li>

        </ul>

    </div>

    <div id="content">

        <ul id="the-grid"></ul>

        <a href="#" id="update-list">Update List!</a>

        <ul id="current-list"></ul>

    </div>

</div>

CSS

body {
    font: 12px Arial, sans-serif;
    line-height: 14px;
}

#wrapper {
    width: 1050px;
    margin: 0 auto;
}

#sidebar {
    float: left;
    width: 200px;
    padding: 15px 15px 15px 15px;
    background: #efefef;
}

#sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 450px;
}

#content {
    float: right;
    width: 820px;
}

ul#the-grid {
    height: 450px;
    margin: 0 10px 10px 10px;
    padding: 15px 5px 15px 15px;
    list-style-type: none;
    background: #efefef;
}

ul#the-grid li {
    display: block;
    float: left;
}

.close {
    float: right;
    padding-left: 5px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
}

.part .close {
    color: #000;
}

/* sidebar styles */
 
#sidebar ul li.drag-element {
    background: #333;
    color: #ccc;
    padding: 25px;
    margin: 0  10px 10px 0;
    width: 150px;
    float: left;
}  

#sidebar ul li.part {
    background: #ccc;
    color: #000;
    padding: 5px;
    margin: 0  10px 10px 0;
    width: 190px;
    float: left;
}

#sidebar ul li .part-holder {
    display: none !important;
}

/* content styles */

#content ul li.drag-element {
    background: #333;
    color: #ccc;
    padding: 25px;
    margin: 0  10px 10px 0;
    height: 125px;
    width: 200px;
    float: left;
} 

#content ul .part {
    background: #ccc;
    color: #000;
    padding: 5px;
    margin-bottom: 5px;
}

#content ul .part-holder {
    display: block;
    margin: 15px 0 0 0;
    height: 100px;
    overflow: auto;
    overflow-x: hidden;
    padding: 0;
    background: #555;
}

#content ul.part-holder li {
    display: block;
    float: none;
}

JavaScript

$(document).ready(function() {
    $('#the-grid').sortable({
        tolerance: 'pointer',
        update: function(event, ui) {
            if( $(ui.item).has('.close').length == 0 ) {
                $(ui.item).prepend('<a href="#" class="close" onclick="$(this).parent().remove();">x</a>');
            }

            $('.part-holder', ui.item).sortable({ 
                tolerance: 'pointer',
                update: function(event, ui) {
                    if( $(ui.item).has('.close').length == 0 )
                        $(ui.item).prepend('<a href="#" class="close" onclick="$(this).parent().remove();">x</a>');
                } 
            }); 

        }
    });

    $('#sidebar > ul > li.part').draggable({
        helper: 'clone',
        connectToSortable: '.part-holder',
        addClasses: false
    }); 

    $('.drag-element').draggable({
        revert: 'invalid',
        helper: 'clone',
        connectToSortable: '#the-grid',
        addClasses: false
    });

    $('#update-list').click(updateList);
});

function updateList() {
    $('#current-list').empty(); 

    $('#the-grid > li').each( function(index, value) {
            $('#current-list').append('<li>' + $(value).html() + '</li>');
    }); 
}