JSFiddle - React, Tailwind, and code Playground

HTML

<div class="well">
    <div id="menuIcon" class="menu">Icons</div>
    <div id="menuIcon2" class="menu">Charts</div>
</div>
<div id="droppable1" class="canvas col-md-3" style="z-index:-1;"></div>
<div id="droppable2" class="canvas col-md-9" style="z-index:-1;"></div>

CSS

.well {
    width: 150px;
    height: 150px;
    border: 3px solid red;
}
.canvas {
    width: 350px;
    height: 150px;
    border: 3px solid blue;
}

JavaScript

$(function () {

    $('.menu').draggable({
        helper: 'clone'
    });

    $('#droppable1, #droppable2').droppable({
        drop: function (event, ui) {
            $(this)
                .append(ui.helper.clone(false).css({
                position: 'relative',
                left: '0px',
                top: '0px'
            }));
        }
    });

});