JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://da7xgjtj801h2.cloudfront.net/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://da7xgjtj801h2.cloudfront.net/2012.2.913/styles/kendo.default.min.css">
<script src="https://da7xgjtj801h2.cloudfront.net/2012.2.913/js/kendo.all.min.js"></script>
<html>
    <head><title>Kendo UI Splitter bug</title></head>
    <body>
        <div id="koulutuspuuSplitter2" style="clear: both; height:500px;">
            <div id="koulutuspuu2"></div>
            <div id="koulutuspuuKomponentti2" style="padding:4px;"></div>
        </div>
    </body>
</html>

JavaScript

$(document).ready(function () {
    // hide the div.
    $("#koulutuspuuSplitter2").hide(600, function () {
        // create the splitter.
        $("#koulutuspuuSplitter2").kendoSplitter({
            panes: [
                { collapsible: true, size: "100px" },
                { collapsible: true },
            ]
        });
        // show the div.
        $("#koulutuspuuSplitter2").show(600);
    });
});