JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<pre id="outerWidth"></pre>
<pre id="status"></pre>
<div id="demo" style="height:650px">
    <!-- splitter -->
    <div class="horiz">
        <!-- pane, left -->
        <div>
            <!-- splitter -->
            <div class="tabular-wrap">
                <!-- pane, top -->
                <div>
                    <div class="tabular-header">Other Results</div>
                </div>
                <!-- pane, bottom -->
                <div>
                    <!-- splitter -->
                    <div class="tabular-results" data-pane-index="30" style="height:100%">
                        <div class="outer">
                            <div class="inner">
                                <!-- pane -->
                                <div class="cpane">
                                    <!-- splitter -->
                                    <div class="column inactive" style="height:100%">
                                        <!-- pane top -->
                                        <div class="column-head">One</div>
                                        <!-- pane bottom -->
                                        <div>
                                            <div>A</div>
                                            <div>B</div>
                                            <div>C</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="cpane">
                                    <div class="column inactive" style="height:100%">
                                        <div class="column-head">Two</div>
                                        <div>
        ...

CSS

.inner, .outer {
    height:100%;
}
.outer {
    overflow: hidden;
}
.column .k-scrollable {
    overflow-x:
}
.column-head {
    background-color:#17e878
}
.column {
    background-color: #fff8e7
}

JavaScript

var cnt = 0;
setupMain();
setupColumns();
pollOuterWidth();

function pollOuterWidth() {
    $('#outerWidth').html('Actual outer width: ' + $('.outer').width() + '\ntabular-results width: ' + $('.tabular-results').width());
    setTimeout(function(){
        pollOuterWidth();
    }, 500);
}

function onLayoutChange() {
    if (cnt > 0) {
        var $outer = $('.outer'),
            outerWidth = $outer.width(),
            colWidth = (outerWidth / 4).toString() + 'px',
            $inner = $('.inner'),
            $panesToResize = $('.cpane'),
            splitter = $inner.data('kendoSplitter');
        $inner.width(outerWidth * 1.75);
        $panesToResize.each(function (idx, el) {
            splitter.size($panesToResize.eq(idx), colWidth);
        });
    }
    $('#status').html('Layout changed...' + cnt+++'\nInaccurate outer width: ' + outerWidth + '\nCol width: ' + colWidth + '\ntabular-results width: ' + $('.tabular-results').width());
}

function setupColumns() {
    var $outer = $('.outer'),
        outerWidth = $outer.width(),
        colWidth = (outerWidth / 4).toString() + 'px',
        $inner = $('.inner');
    $inner.width(outerWidth * 1.75);
    $inner.kendoSplitter({
        orientation: 'horizontal',
        panes: [{
            resizable: false,
            size: colWidth
        }, {
            resizable: false,
            size: colWidth
        }, {
            resizable: false,
            size: colWidth
        }, {
            resizable: false,
            size: colWidth
        }, {
            resizable: false,
            size: colWidth
        }, {
            resizable: false,
            size: colWidth
        }, {
            resizable: false,
            size: colWidth
        }]
    });
    $inner.find('.column').kendoSplitter({
        orientation: 'vertical',
        panes: [{
            resizable: false,
            scrollable: false,
            size: '20px'
        }, {
            resizable: false
        }]
   ...