JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://methvin.com/splitter/splitter.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css">
    <div id="container">
        <div id ="LeftPane">
            <div id="tree">
                 pane 1
            </div>
        </div>
        <div id="RightPane">
            <div id="RightOrderPane">
                Pane 2
            </div>
            <div id="OptionPane">
                pane 3 - Needs to be dockable!
            </div>
        </div>
    </div>

CSS

#container {         height: 400px;         margin: 1em 3em;         border: 4px solid #BAD0FF;         /* No padding allowed */         }         /*          * Left-side element of the splitter. Use pixel units for the          * min-width and max-width; the splitter plugin parses them to          * determine the splitter movement limits. Set the width to          * the desired initial width of the element; the plugin changes          * the width of this element dynamically.          */         #LeftPane {             background: #eef;             overflow: auto;             /* No margin or border allowed */         }         /*          * Right-side element of the splitter.          */         #RightPane {             background: #eef;             overflow:hidden;             /* No margin or border allowed */         }         /*          * Splitter bar style; the .active class is added when the          * mouse is over the splitter or the splitter is focused          * via the keyboard taborder or an accessKey.          */         #container .vsplitbar {             width: 6px;             background: #BAD0FF url(images/vgrabber.gif) no-repeat center;         }         #container .vsplitbar:hover {         background: #D9E4FC url(images/vgrabber.gif) no-repeat center;         }         #container .vsplitbar.active {         background: #da8 url(images/vgrabber.gif) no-repeat center;         opacity: 0.7;         }

JavaScript

$(document).ready(function() {
        $("#container").splitter({
            type: "v",
            outline: true,
            minLeft: 100, sizeLeft: 150, minRight: 100,
            resizeToWidth: true,
            accessKey: 'I'
        });
        // Second vertical splitter, nested in the right pane of the main one.
        $("#RightPane").splitter({
            type: "v",
            outline: true,
            sizeLeft: 150,
            minLeft: 100,
            minRight: 100,
            maxRight: 250,
            resizeToWidth: true,
            dock: "right",
            dockSpeed: 200,
            dockKey: 'Z',    // Alt-Shift-Z in FF/IE
            accessKey: 'I'    // Alt-Shift-I in FF/IE
        });
        });