JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2011.2.804/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.2.804/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.2.804/styles/kendo.kendo.min.css">
<div id="vertical-master" style="height: 500px;"> <!-- adjusted size for jsFiddle sake, 100% will is just fine -->
            <div id="topPane" class="header">
                #topPane
            </div>
            <div>
                <div id="horizontal-master" style="height: 100%; width: 100%; border: 0; overflow:hidden;">
                    <div id="leftPane" style="overflow-y: auto; overflow-x:hidden;">
                        #leftPane
                    </div>
                    <div id="rightPane" style="overflow:hidden">
                        
                        <div id="content-splitter" style="height:100%;">
                            <div id="topToolbarPane">
                                #topToolbarPane
                            </div>
                            <div id="bottomContentPane">

                                
                                <div id="mediaitems" class="t-grid t-widget" tabindex="0"><div class="t-grid-header" style=""><div class="t-grid-header-wrap"><table cellspacing="0"><colgroup><col style="width: 100px;"><col><col><col style="width: 200px;"><col style="width: 100px;"></colgroup><thead><tr><th data-field="rating" class="t-header"><a href="#" class="t-link">Rating</a></th><th data-field="title" class="t-header"><a href="#" class="t-link">Title</a></th><th data-field="speaker" class="t-header"><a href="#" class="t-link">Speaker</a></th><th data-field="date" class="t-header"><a href="#" class="t-link">Created</a></th><th data-field="nodeid" class="t-header"><a href="#" class="t-link">Actions</a></th></tr></thead></table></div></div><div class="t-grid-content"><table cellspacing="0" class="t-focusable t-selectable"><colgroup><col...

JavaScript

// header, content, footer
$("#vertical-master").kendoSplitter({
        orientation: "vertical",
        panes: [
            { collapsible: false, resizable: false, size: "63px" },
            { collapsible: false, resizable: false },
            { collapsible: false, resizable: false, size: "0px" }
        ]
    });

// Left, Right, Details
$("#horizontal-master").kendoSplitter({
        panes: [
            { collapsible: false, resizable: false, size: "240px" },
            { collapsible: false, resizable: false },
            { collapsible: true, resizable: false, collapsed: true, size: "454px", min: "454px", max: "454px" }
        ]
    });

// Toolbar, Pods
$("#content-splitter").kendoSplitter({
        orientation: "vertical",
        panes: [
            { collapsible: false, resizable: false, size: "52px" },
            // Alex: the second pane shouldn't have any height;
            // this way it will be `fluid` and will take all available space
            // otherwise, the splitter gets 100% + 52px high
            // Also, setting scrollable: false will remove the scrollbar
            { collapsible: false, resizable: false /*, size: "100%" */, scrollable: false }
        ]
    });


// Alex: now when the pane is properly sized, we take care of the grid.
// We need to set the following:
// height-of-scrolling-container = height-of-pane - height-of-grid-header/footer
// ..and since height-of-grid-header/footer = height-of-grid - height-of-content-area
$(".t-grid-content").height(
    $("#bottomContentPane").outerHeight() // pane
    - ($("#mediaitems").outerHeight() // grid
      - $(".t-grid-content").outerHeight())); // content area