JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.blueopal.min.css">
<div id="vertical">
    <div id="verticalTop">
        <div id="horizontalTop" style="height: 50%; width: 100%">
            <div id="topLeftPane">
                <h3>Top Left</h3>
            </div>
            <div id="topCenterPane">
                <h3>Top Center</h3>
            </div>
            <div id="topRightPane">
                <h3>Top Right</h3>
            </div>
        </div>
        <div id="horizontalBottom" style="height: 50%; width: 100%">
            <div id="bottomLeftPane">
                <h3>Bottom Left</h3>
            </div>
            <div id="bottomCenterPane">
                <h3>Bottom Center</h3>
            </div>
            <div id="bottomRightPane">
                <h3>Bottom Right</h3>
            </div>
        </div>
    </div>
</div>

JavaScript

$(document).ready(function () {
    var vertical = $('#vertical').kendoSplitter({
        orientation: 'vertical',
        panes: [
            { collapsible: true, resizable: true },
            { collapsible: true, resizable: true }
        ],
        resize: function () {
            if (vertical) {
                vertical.wrapper.height($(window).height() - 40);
            }
        }
    }).data('kendoSplitter');
    
    $('#horizontalTop').kendoSplitter({
        orientation: 'horizontal',
        panes: [
            { collapsible: true, size: '33%' },
            { collapsible: true, size: '34%' },
            { collapsible: true, size: '32%' }
        ]
    });
    
    $('#horizontalBottom').kendoSplitter({
        orientation: 'horizontal',
        panes: [
            { collapsible: true, size: '33%' },
            { collapsible: true, size: '34%' },
            { collapsible: true, size: '32%' }
        ]
    });
    
    vertical.trigger('resize');
});