JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="colman-title" nowrap>( Some Header)</div>
	<br><br><br>
	
		<div class="colman-columnsPC">
	
		<br>
			<div id="divFoo" nowrap="true" style="width:20325px;">
				<ul id="sortable">
				
					
					
					<div style="display:inline-table;" id="3102919" dataID="3102919"> 
						<p style = "display:inline-block;float:left" class="resizeLeft" onClick="resizeWidget(document.getElementById('widget_3102919'),-1)" id="minus_3102919">-</p>
						<p  id="widget_3102919" userSpreadsheetColumnID="3102919" class="widget" visibility="1" value=""  style="width:710px;display:inline-block;float:left">Media Type</p>
						<p style = "display:inline-block;float:left" onClick="resizeWidget(document.getElementById('widget_3102919'),1)" class="resizeRight" id="plus_3102919">+</p>
						<p style = "display:inline-block;float:left">&nbsp;&nbsp;&nbsp;</p> 
					</div> 
					
				
					
					
					<div style="display:inline-table;" id="3102859" dataID="3102859"> 
						<p style = "display:inline-block;float:left" class="resizeLeft" onClick="resizeWidget(document.getElementById('widget_3102859'),-1)" id="minus_3102859">-</p>
						<p  id="widget_3102859" userSpreadsheetColumnID="3102859" class="widget" visibility="1" value=""  style="width:625px;display:inline-block;float:left">Job ID</p>
						<p style = "display:inline-block;float:left" onClick="resizeWidget(document.getElementById('widget_3102859'),1)" class="resizeRight" id="plus_3102859">+</p>
						<p style = "display:inline-block;float:left">&nbsp;&nbsp;&nbsp;</p> 
					</div> 
					
				
					
					
					<div style="display:inline-table;" id="3102918" dataID="3102918"> 
						<p style = "display:inline-block;float:left" class="resizeLeft" onClick="resizeWidget(document.getElementById('widget_3102918'),-1)" id="minus_3102918">-</p>
						<p  id="widget_3102918" userSpreadsheetColumnID="3102918"...

CSS

span {height:20px; line-height:15px; font-size:12px;vertical-align:middle;}
		#sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
	  	#sortable li span { position: absolute; margin-left: -1.3em; }
	  	#sortable >div { float: left; }
	  	.placeholder {display: inline-block; width: 60px; height: 15px;  border: 1px solid yellow;  background-color: orange;}
}


//IGNORE THIS
body, div, table, td, p, li, span, option, select, input, a, button, textarea{font:normal 10px/12px verdana, arial, helvetica, geneva, sans-serif;}
body{color:#036;text-align:center;}

.colman-body{margin:0 20px 0 30px;}
.colman-title{margin:0 0 0 30px;position:absolute;left:0;width:98%;font-size:11px;padding:0 0 5px;color:#036;text-transform:capitalize;border-bottom:1px solid #036;text-align:left;background-color:#FFF;}
.colman-title{color:#193B5E;background-color:#FFF;border-bottom-color:#193B5E;}
.colman-subhead{border:1px solid #C3C0BD;background-color:#fff;text-align:left;font-weight:normal;font-size:10px;width:98%;padding-left:25px;padding-right:25px;font-weight:normal;}
.colman-subhead{background-color:#FFF;border-color:#193B5E;}
.colman-subhead li{padding:0 0 5px}
.colman-subhead-td{width:50%;text-align:left;}
.colman-subhead span{font-size:10px;font-weight:bold}
.colman-columnsPC{border:1px solid #C3C0BD;background-color:#fff;text-align:left;font-weight:normal;font-size:10px;width:98%;clip:rect(0,98%,70px,0px);overflow-x:scroll;overflow-y:hidden;}
.colman-columnsPC{background-color:#FFF;border-color:#193B5E;}
.colman-columnsMAC{border:1px solid #C3C0BD;background-color:#FFF;font-size:10px;width:98%;text-align:left;clip:rect(0,98%,80px,0);overflow:scroll;}
.colman-columnsMAC{background-color:#FFF;border-color:#193B5E;}
.dropTarget{text-align:center;border:1px solid;height:20px;margin:0;width:12px;cursor:pointer;color:#036;font-size:10px;padding:0;}
.dropTarget{color:#193B5E;border-color:#193B5E;background-color:#193B5E;}
.dragSource{text-align:center;border:1px...

JavaScript

$( function() {
	    $( "#sortable" ).sortable({
	    items: "> div",
		opacity: 0.8,
		placeholder: "placeholder",
		tolerance: "pointer",
		helper: "original",
		revert: true,
		axis: "x"});
	    $( "#sortable" ).disableSelection();
	    
	  } );