JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<div id='container'>
    <div class='parent'>
        <div class='child'>Prod1</div>
        <div class='child'>Prod2</div>
        <div class='child'>Prod3</div>
    </div>
    <div class='parent'>
        <div class='child'>Prod4</div>
        <div class='child'>Prod5</div>
    </div>
</div>

CSS

#container {
    position:relative;
    height:70px;
    text-align:center;
    background:dodgerblue;
}
.parent {
    float:left;
    height:60px;
    margin:2.5px;
    border:1px solid black;
}
.child {
    float:left;
    width:60px;
    height:60px;
    background:#fff;
    margin:0 2.5px;
}

JavaScript

$('.parent').sortable({
    connectWith: '.parent, #container',
    tolerence: 'pointer',
    receive: function (e, ui) {
        console.log('parent - receive!');
    },
    remove: function (e, ui) {
        console.log('parent - remove!');
    }
});

$('#container').sortable({
    connectWith: '.parent',
    start: function (e, ui) {
        console.log('start - container!');
    },
    receive: function (e, ui) {
        console.log('receive - container');
    },
    remove: function (e, ui) {
        console.log('remove - container!');
    },
});