JSFiddle - React, Tailwind, and code Playground

HTML

<div id="spliter2">
  <div class="a">Praesent volutpat tellus in eros dapibus elementum. Nam laoreet risus non nulla mollis ac luctus felis dapibus. Pellentesque mattis elementum augue non sollicitudin. Nullam lobortis fermentum elit ac mollis. Nam ac varius risus. Cras faucibus euismod nulla, ac auctor diam rutrum sit amet.
  </div>
  <div class="b">Praesent volutpat tellus in eros dapibus elementum. Nam laoreet risus non nulla mollis ac luctus felis dapibus. Pellentesque mattis elementum augue non sollicitudin. Nullam lobortis fermentum elit ac mollis. Nam ac varius risus. Cras faucibus euismod nulla, ac auctor diam rutrum sit amet.
  </div>
</div>

CSS

#spliter2 .a {
  background-color: #2d2d2d;
}
#spliter2 .b {
  background-color: #2d002d;
}

/*!
 * StyleSheet for JQuery splitter Plugin
 * Copyright (C) 2010 Jakub Jankiewicz <http://jcubic.pl>
 *
 * Same license as plugin
 */
.splitter_panel {
  position: relative;
}
.splitter_panel .vsplitter {
    background-color: grey;
    cursor: col-resize;
    z-index:900;
    width: 4px;
}

.splitter_panel .hsplitter {
    background-color: #5F5F5F;
    cursor: row-resize;
    z-index: 800;
    height: 4px;
}
.splitter_panel .vsplitter, .splitter_panel .left_panel, .splitter_panel .right_panel,
.splitter_panel .hsplitter, .splitter_panel .top_panel, .splitter_panel .bottom_panel {
    position: absolute;
    overflow: auto;
}
.splitter_panel .vsplitter, .splitter_panel .left_panel, .splitter_panel .right_panel {
  height: 100%;
}
.splitter_panel .hsplitter, .splitter_panel .top_panel, .splitter_panel .bottom_panel {
  width: 100%;
}
.splitter_panel .top_panel, .splitter_panel .left_panel, .splitter_panel .vsplitter {
   top: 0;
}
.splitter_panel .top_panel, .splitter_panel .bottom_panel, .splitter_panel .left_panel, .splitter_panel .hsplitter {
   left: 0;
}
.splitter_panel .bottom_panel {
   bottom: 0;
}
.splitter_panel .right_panel {
   right: 0;
}

JavaScript

(function($, undefined) {
    var count = 0;
    var splitter_id = null;
    var splitters = [];
    var current_splitter = null;
    
    $.fn.split = function(options) {
        var data = this.data('splitter');
        if (data) {
            return data;
        }
        var panel_1;
        var panel_2;
        
        var settings = $.extend({
            limit: 100,
            position: '50%'
        }, options || {});
        
        this.settings = settings;
        
        var cls;
        var children = this.children();

        panel_1 = children.first().addClass('top_panel')
        panel_2 = panel_1.next().addClass('bottom_panel');
        cls = 'hsplitter';

        var width = this.width();
        var height = this.height();
        
        var id = count++;
        
        this.addClass('splitter_panel');
        var splitter = $('<div/>').addClass(cls).mouseenter(function() {
            splitter_id = id;
        }).mouseleave(function() {
            splitter_id = null;
        }).insertAfter(panel_1);
        var position;

        function get_position(position) {
            if (typeof position === 'number') {
                return position;
            } else if (typeof position === 'string') {
                var match = position.match(/^([0-9]+)(px|%)$/);
                if (match) {
                    if (match[2] == 'px') {
                        return +match[1];
                    } else {
                        return (height * +match[1]) / 100;
                    }
                } else {
                    //throw position + ' is invalid value';
                }
            } else {
                //throw 'position have invalid type';
            }
        }

        var self = $.extend(this, {
            refresh: function() {
                var new_width = this.width();
                var new_height = this.height();
                if (width != new_width || height != new_height) {
                    width =...