JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css">
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.js"></script>
<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css">
<div id="table">
    <span class="ui-widget-header">zfk_clients</span>
    <div id="container">      
        
        <ul>
          <li class="ui-draggable">id</li>
          <li class="ui-draggable">first_name</li>
          <li class="ui-draggable">last_name</li>
          <li class="ui-draggable">address1</li>
          <li class="ui-draggable">address2</li>
          <li class="ui-draggable">city</li>
          <li class="ui-draggable">state</li>
          <li class="ui-draggable">country</li>
          <li class="ui-draggable">zip</li>
          <li class="ui-draggable">phone_number</li>
          <li class="ui-draggable">fax_number</li>
          <li class="ui-draggable">mobile_number</li>
          <li class="ui-draggable">email_address</li>
          <li class="ui-draggable">web_address</li>
          <li class="ui-draggable">company_name</li>
        </ul>
    </div>
</div>

CSS

#table { height:200px; overflow: hidden; width:150px; border: 1px solid black }
#container { width: 99%; height: 99%; }

.ui-widget-header { display: block; padding: 2px 5px; }

#table ul { margin: 5px 10px; }

JavaScript

$(document).ready(function () { 
    
    var pane = $("#container")
    pane.jScrollPane();
    var api = pane.data('jsp');

        
    $("#table").resizable( {
        resize: function() {
            api.reinitialise();
        }
    } );
   // $('#table').jScrollPane();

});