JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<button>click</button>
<script type="text/x-kendo-template" id="template">
    <div class="gw-col1">
        filter strips
    </div>
    <div class="gw-col2">
        asdfasdf
    </div>
</script>

CSS

/*.gw-col2 { border: 1px solid green; }*/

JavaScript

$(document).ready(function () {
    $('button').on('click', function (e) {
        var template = kendo.template($('#template').html());
        var $windowDiv = $('<div id="gw-window" />');
        var $divWrapper = $('<div id="gw-wrap" />')
                                .css({ height: '100%' })
                                .appendTo($windowDiv)
                                .html(template({}));
        
        $divWrapper.kendoSplitter({
                    orientation: 'horizontal',
                    panes: [
                            { collapsible: false, resizable: false, size: "200px", max: "200px" },
                            { collapsible: false, resizable: false }
                        ]
                });
        
        $windowDiv.kendoWindow({
            actions: ["Maximize", "Close"],
            width: 500,
            height: 350,
            minWidth: 500,
            minHeight: 350,
            scrollable: false,
            resize: function (e) {
                        $divWrapper.trigger('resize');
                    },
            open: function (e) {
                setTimeout(function() {
                    $divWrapper.trigger('resize');
                }, 1);
            }
        }).data('kendoWindow').open();
    });
});