JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<div style="border-width: 2; border-color:blue;width: 100%; height: 100%; padding: 2;">
    <button id='resizeButton'>Resize</button>
    <div id="splitterMOS" class="ctt-autoSize">
        <div id="linkerMOS">
            <div id="containerMOS" class="ctt-autoSize">
                <div id="panelMOS" class="ctt-autoSize"></div>
            </div>
        </div>
        <div id="rechterPAD">
            <div id="containerPAD" class="ctt-autoSize">
                <div id="panelPAD" class="ctt-autoSize"></div>
            </div>
        </div>
    </div>
</div>

CSS

body {
    height: 100%;
}
html {
    height: 100%;
}
#panel1 {
    height: 100%;
}
#horizontal {
    height: 100%;
    margin: 0 auto;
}
#vertical {
    height: 100%;
    margin: 0 auto;
}
#top-pane {
    height: 100%;
}
#left-pane {
    height: 100%;
    background-color: rgba(60, 70, 80, 0.05);
}
#right-pane {
    height: 100%;
    background-color: rgba(60, 70, 80, 0.05);
}
.pane-content {
    height: 100%;
    padding: 0 10px;
}

JavaScript

var PADDataSource = new kendo.data.HierarchicalDataSource({
        data: [{
            text: "PAD Opdrachtgever 1",
            id: 1,
            items: [{
                text: "PAD Project 1",
                id: 2,
                items: [{
                    text: "PAD Object 1",
                    id: 3
                }]
            }, {
                text: "PAD Project 2",
                id: 4
            }, {
                text: "PAD Project 3",
                id: 4
            }, {
                text: "PAD Project 4",
                id: 4
            }, {
                text: "PAD Project 5",
                id: 4
            }, {
                text: "PAD Project 6",
                id: 4
            }, {
                text: "PAD Project 7",
                id: 4
            }, {
                text: "PAD Project 8",
                id: 4
            }, {
                text: "PAD Project 9",
                id: 4
            }, {
                text: "PAD Project 10",
                id: 4
            }, {
                text: "PAD Project 11",
                id: 4
            }, {
                text: "PAD Project 12",
                id: 4
            }, {
                text: "PAD Project 13",
                id: 4
            }, {
                text: "PAD Project 14",
                id: 4
            }, {
                text: "PAD Project 15",
                id: 4
            }, {
                text: "PAD Project 16",
                id: 4
            }, {
                text: "PAD Project 17",
                id: 4
            }, {
                text: "PAD Project 18",
                id: 4
            }, {
                text: "PAD Project 19",
                id: 4
            }, {
                text: "PAD Project 20",
                id: 4
            }, {
                text: "PAD Project 21",
                id: 4
            }, {
                text: "PAD Project 22",
                id: 5
           ...