JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<div class="picker-list-top" style="width:800px;">
	
	
	<div class="colTitle" style="width: 43%; float:left;">
		Excluded Columns
	</div>
	
	
		

	<div class="colTitle">
		Included Columns
	</div>

	<div class="picker-list-container  picker-list" style="width:780px; overflow: hidden; position: relative;">
	<div style="float:left; position:relative;">
	
		
			<li>
				<span class="picker-list-handle">::</span>
				<input type="hidden" value="1">
				<span class="move-up icon-arrow-up"></span>
				<span class="move-down icon-arrow-down"></span>
				<span class="picker-label">Add Driver</span>
				<span class="move-right icon-arrow-right add-remove-selection"></span>
				<span class="move-left icon-remove add-remove-selection"></span>
			</li>
		
			<li>
				<span class="picker-list-handle">::</span>
				<input type="hidden" value="2">
				<span class="move-up icon-arrow-up"></span>
				<span class="move-down icon-arrow-down"></span>
				<span class="picker-label">Idle Assets</span>
				<span class="move-right icon-arrow-right add-remove-selection"></span>
				<span class="move-left icon-remove add-remove-selection"></span>
			</li>
		
	</ul>
	</div>

	<div style="float:left; position:relative;">
	<ul class="sortable-picker-list connected-picker-list picker-selected-list ui-sortable" id="includedOpt" style="float:left; width: 300px;">
		
		
		
			
		
		
		
			
		
		
		
			<li style="" class="">
				<span class="move-right icon-arrow-right add-remove-selection"></span>
				
		
				<span class="move-left icon-remove add-remove-selection"></span>
				<span class="picker-list-handle">::</span>
				<input type="hidden" value="3">
				<span class="move-up icon-arrow-up"></span>
				<span class="move-down icon-arrow-down"></span>
				<!--<span class="add-remove-selection">remove</span>-->
				<span...

CSS

/*--> STYLE GUIDE CLASSES <--*/

body.styleguide{margin: 20px;}

.styleguide { background-image:none; }
.styleguide .columnfull p, 
	.styleguide .columnhalf p, 
	.styleguide .columnthird p, 
	.styleguide .columnfourth p, 
	.styleguide .columnthreefourth p, 
	.styleguide .columntwothird p {padding:5px 10px; margin:0; }
.styleguide *.tabcontent h3 { }
.styleguide *.tabcontent h3 span { margin-right:30px; } 
.styleguide *.tabcontent h3 a { margin-right:15px; font-size:0.8em; color:#08A5E1; text-decoration:none; }
.styleguide *.tabcontent h3 a:hover { color:#3B73B9; text-decoration:underline; }
.comment { font-style:italic; color:#FFF; background-color:pink; padding:4px 10px; font-weight:bold; margin:25px 15px 25px 0; margin-top:25px; }
.comment a { float:right; padding:1px 0px 0 0; font-size:0.9em; text-decoration:none; font-style:normal; font-weight:bold; }
.comment a:hover { text-decoration:underline;}
.code { background-color: pink; font-variant:normal; padding:4px 10px; margin-right:15px; color:#FFF; margin:25px 15px 25px 0; }
.code code { font-weight:bold; }


.styleguide div.example{margin: 10px; float: left;height: 35px;vertical-align: bottom;width: 100px;display: table;}

a, 
input, 
button, 
select option, 
li, 
span {font-family: Arial, Helvetica, sans-serif;}

input[type=submit],
input[type=button],
input[type=reset],
button{
	font-weight: bold;
	border: 1px solid;
	border-radius:3px; 
	-moz-border-radius:3px;
	cursor: pointer;
	font-size: 1.3em;
	padding: 3px 10px 8px 10px;
	height: 28px;
	color: #ffffff;
	border-color: #76b900;
	background-color: #76b900;
        font-family: Inspira, Arial, Helvetica, sans-serif;
}
input[type=submit].secondary,
input[type=button].secondary,
input[type=reset].secondary,
button.secondary{
	font-size: 1.0em;
	padding: 0px 5px 3px 5px;
	height: 20px;
	color: #ffffff;
}
input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover,
button:hover{
	border-color: #08a5e1!important;
	background-color:...

JavaScript

$('.picker-list-container ul').sortable({
    	  connectWith: '.connected-picker-list',
          items: 'li:not(.disabled)',
          forcePlaceholderSize: true
      });