JSFiddle - React, Tailwind, and code Playground

by achudars

HTML

<script src="https://raw.github.com/shagstrom/split-pane/master/split-pane.js"></script>
    <body>
        <div class="split-pane fixed-left">
            <div class="split-pane-component" id="left-component">
                This is the left component
            </div>
            <div class="split-pane-divider" id="my-divider"></div>
            <div class="split-pane-component" id="right-component">
                This is the right component
            </div>
        </div>
    </body>

CSS

html, body {
                height: 100%;
                min-height: 100%;
                margin: 0;
                padding: 0;
            }
            .split-pane-divider {
                background: #aaa;
            }
            #left-component {
                width: 20em;
            }
            #my-divider {
                left: 20em; /* Same as left component width */
                width: 5px;
            }
            #right-component {
                left: 20em;  /* Same as left component width */
                margin-left: 5px;  /* Same as divider width */
            }

JavaScript

$(function() {
                $('div.split-pane').splitPane();
            });