JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div id="log">
    <button id="toggle">Toggle A's size</button>
</div>
<div class="k-content">
    <div class="a">A</div>
    <div class="b">B</div>
</div>

CSS

body {
    font-family: Verdana, sans-serif;
    font-size: 12px;
}
.detail-outer-wrap * {
    background-color: #81d948;
    color: #FFF;
}

JavaScript

$(function () {
    setupSplitters();
    $('#toggle').click(function () {
        var splitter = $('.k-content').data('kendoSplitter');
        var curSize = splitter.size('.a');
        splitter.size('.a', curSize === '100%' ? '70%': '100%');
    });
});

function setupSplitters() {
    $('.k-content').kendoSplitter({
        orientation: 'horizontal',
        panes: [
        // A
        {
            resizable: true, collapsible: false, max:'90%', min:'33%' , size: '70%'
        },
        // B
        {
            resizable: true, collapsible: false, max:'67%', min:'10%',size: '30%' 
        }]
    });
}