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">
<div id="demo" style="height:650px">
    <!-- splitter -->
    <div class="tabular-wrap">
        <!-- pane, left -->
        <div>
            <div class="tabular-header">Other Results</div>
        </div>
        <!-- pane, right -->
        <div>
            <!-- splitter -->
            <div class="tabular-results" data-pane-index="30" style="height:100%">
              <!-- pane -->
              <div>
                <!-- 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>
                <div class="column inactive" style="height:100%">
                    <div class="column-head">Two</div>
                    <div>
                        <div>A</div>
                        <div>B</div>
                        <div>C</div>
                        <div>D</div>
                        <div>E</div>
                        <div>F</div>
                        <div>G</div>
                        <div>H</div>
                        <div>I</div>
                        <div>J</div>
                        <div>K</div>
                        <div>L</div>
                        <div>M</div>
                        <div>N</div>
                        <div>O</div>
                    </div>
                </div>
              </div>
              <div>
                <div class="column inactive"...

CSS

.column-head {
    background-color:#17e878
}
.column {
    background-color: #fff8e7
}

JavaScript

setupMain();
setupColumns();

function setupColumns() {
    var colWidth = '15%';
    $('.tabular-results').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
        }]
    });
    $('.tabular-results').find('.column').kendoSplitter({
        orientation: 'vertical',
        panes: [{
            resizable: false,
            scrollable: false,
            size: '20px'
        }, {
            resizable: false
        }]
    });
};

function setupMain() {
    var $el = $('.tabular-wrap');
    $el.kendoSplitter({
        orientation: 'vertical',
        panes: [{
            collapsible: false,
            resizable: false,
            size: '76px',
            scrollable: false
        }, {
            collapsible: false,
            resizable: false
        }]
    });
};