JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<div class="ui-splitselect ui-helper-clearfix ui-widget ui-widget-content" style="height:200px;" >
    <div class="ui-widget-content ui-splitselect-selected">
        <div class="ui-widget-header ui-helper-clearfix">
        	 List1
        </div>
        <ul id="sortable1"  class="ui-splitselect-list" style="height: 332px;">
            <li class="ui-splitselect-item ui-state-default">
                <a class='ui-splitselect-handle-drag'><span class='ui-icon ui-icon-carat-2-n-s'></span></a>
                <span class="ui-splitselect-handle-select">TEST-List1</span>
                <a class="ui-splitselect-handle-move" href="#"><span class="ui-icon ui-icon-plus"></span></a>
            </li>  
        </ul>
    </div>
    <div class="ui-widget-content ui-splitselect-available"  >
        <div class="ui-widget-header ui-helper-clearfix">
        	  List2
        </div>
        <ul id="sortable2"  class="ui-splitselect-list" style="height: 332px;">
            <li class="ui-splitselect-item ui-state-default">
                <a class='ui-splitselect-handle-drag'><span class='ui-icon ui-icon-carat-2-n-s'></span></a>
                <span class="ui-splitselect-handle-select">TEST-List2</span>
                <a class="ui-splitselect-handle-move" href="#"><span class="ui-icon ui-icon-plus"></span></a>
            </li>
            <li class="ui-splitselect-item ui-state-default">
                <a class='ui-splitselect-handle-drag'><span class='ui-icon ui-icon-carat-2-n-s'></span></a>
                <span class="ui-splitselect-handle-select">TEST-List2</span>
                <a class="ui-splitselect-handle-move" href="#"><span class="ui-icon ui-icon-plus"></span></a>
            </li>
            <li class="ui-splitselect-item ui-state-default">
                <a class='ui-splitselect-handle-drag'><span class='ui-icon ui-icon-carat-2-n-s'></span></a>
                <span class="ui-splitselect-handle-select">TEST-List2</span>
                <a...

CSS

/* splitselect ----------------------------------*/
 .ui-splitselect {
    font-size: 0.8em;
    width:100% !important;
 
    padding: 0;
    margin: 0 auto;
    text-align:center;
    
}
.ui-splitselect ul {
    -moz-user-select: none;
}
.ui-splitselect .ui-widget-header {
    border: none;
    font-size: 11px;
}
.ui-splitselect-selected {
	  height: 100% !important;
    padding: 0;
    margin: 0;
    float:left;
    border : none;
     width:50%;
}
.ui-splitselect-available {
	  height: 100% !important;
    width:49.4%;
    padding: 0;
    margin: 0;
    float:left;
    border-top: none;
    border-bottom: none;
    border-right: none;
     
}
.ui-splitselect-list {
	  height: 92% !important;
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: auto;
}
.ui-splitselect-item {
    margin: 0;
    padding: 0;
    cursor: default;
    line-height: 20px;
    height: 20px;
    font-size: 11px;
    list-style: none;
    display: list-item;
    white-space: nowrap;
    overflow: hidden;
    margin:1px;
}
.ui-splitselect-item.ui-sortable-helper {
    z-index: 99999;
}
.ui-splitselect-handle-select {
    float:left;
}
.ui-splitselect-handle-drag {
    float: left;
    padding: 2px 5px 2px 5px;
    height: 20px;
    margin:0px 10px 0px 5px;
    border-top:0;
    border-bottom:0;
    cursor:pointer;
}
.ui-splitselect-handle-move {
    text-decoration: none;
    cursor: pointer;
    float: right;
    padding: 2px 5px 2px 5px;
    height: 20px;
    margin:0px 5px 0px 10px;
    border-top:0;
    border-bottom:0;
}

JavaScript

$("#sortable1, #sortable2").sortable({
       appendTo: document.body,
  helper: "clone",
  connectWith: ".ui-splitselect-list",
  containment: ".ui-splitselect",
  scroll: false,
  placeholder: "ui-state-highlight ui-splitselect-item"
 }).disableSelection();