JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id="splitter">
    <div id="header">
        Header / Notification area
    </div>
    <div id="toolbar">
        <button id="bottom" class="k-button">Bottom</button>
        <button id="right" class="k-button">Right</button>
        <button id="hide-show" class="k-button">Hide/Show</button>
    </div>
    <div id="invoice-block">
    </div>
    <div>
        distributions
    </div>
    <div id="footer">
        footer
    </div>
</div>

<div id="splitter-surrogate" style="display:none;">
        <div class="header_pane">
            <p>Invoice Header</p>
        </div>
        <div class="pdf_pane">
            <embed type="application/pdf" src="http://pdfdevjunkie.host.adobe.com/pdf/acrobat_reader_security_9x_Fast.pdf#view=Width&navpanes=0" width="100%" height="97%">
</embed>
        </div>
</div>

CSS

html, body {
    height:100%;
    margin:0;
    padding:0;
}
 
html {
    overflow:hidden;
}

#splitter, #invoice-splitter {
    height:100%;
    border:0;
}

JavaScript

var $splitterSurrogate = $("#splitter-surrogate");
var $splitter;

var triggerResize = function() {
    $("#splitter").data("kendoSplitter").trigger("resize");
    $("#invoice-splitter").data("kendoSplitter").trigger("resize");
};

var setOrientation = function(orient) {    
    var $invoiceBlock = $("#invoice-block");
    $invoiceBlock.empty();
    $("<div id='invoice-splitter' />").appendTo($invoiceBlock);
    
    var markup = $splitterSurrogate.html();
    $splitter = $("#invoice-splitter");
    $splitter.html(markup);
    $splitter.kendoSplitter({
        orientation: orient,
        panes: [
            { collapsible: true},
            { collapsible: true}
        ]
    });
};

$("#bottom").click(function() {
    setOrientation("vertical");
});

$("#right").click(function() {
    setOrientation("horizontal");
});

$("#hide-show").click(function() {
    var splitter = $splitter.data("kendoSplitter");
    var pane = $splitter.find(".pdf_pane");
    splitter.toggle(pane);
});
 
$(document).ready(function() {
    $("#splitter").kendoSplitter({
        orientation: "vertical",
        panes: [
            { collapsible: false, resizable: false, size: "40px" },
            { collapsible: false, resizable: false, size: "30px" },
            { collapsible: false },
            { collapsible: false },
            { collapsible: false, resizable: false, size: "20px" }
        ]
    });
 
    $(window).resize(triggerResize);
    
    setOrientation("vertical");
});