JSFiddle - React, Tailwind, and code Playground

HTML

<h2><a href="#">MY LIST</a></h2>

	<ul id="myproducts">
		<li>
			<div class="cmd_text">
				<label>1</label>

			</div>					
		</li>
		<li>
			<div class="cmd_text">
				<label>2</label>
			</div>					
		</li>
		<li>
			<div class="cmd_text">
				<label>3</label>
			</div>					
		</li>		
		<li>
			<div class="cmd_text">
				<label>4</label>
			</div>					
		</li>			
	</ul>

	<h2><a href="#">MY SORTABLE</a></h2>
			
	<ul id="mylist">			
        <li></li>
        <!--<div></div>-->
	</ul>

CSS

ul {
			list-style-type: none; 
		}
		
		li {
			display: inline-block;
		}
		
		
		#mylist {			    
			height: 100px;
			padding: 10px 10px 10px 50px;
			background-color: #F0EEEE;
		}

		#mylist li{		
			height: inherit;
			display: inline-block;
			padding-right: 20px;
		}
		.sortable-placeholder {
			width: 100px;
			height: 30px;
			background-color: red;
		}
		
		.cmd_text {
			display: table-cell;
			vertical-align: middle;
			height: 100px;				
			width: 100px;
			background-color: #f7f7f7;
		}
		.cmd_text label{
			display:inline;
			
		}

JavaScript

$(function () {			
        $("#myproducts li").draggable({
    	    /*appendTo: "body",*/
    	    helper: "clone",
    	    connectToSortable: "#mylist",
    	    tolerance: "pointer"
    	});
    	$("#mylist").sortable({
    	    placeholder: "sortable-placeholder" 	

    	});
        $("#mylist").empty();
    });