JSFiddle - React, Tailwind, and code Playground

HTML

<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.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<div class="k-content references">
    <div class="references-wrap">
        <div class="searchbar">srch</div>
        <div class="bottom-wrap">
            <div class="list-wrap">
                <div class="list-title">title</div>
                <div class="list-content">
              		<ul id="treeview">
                      <li>
                          
                          My Web Site
                          <ul>
                              <li>
                                  images 2012-01-01
                                  <ul>
                                      <li>my-vacation-photo-at-the-beach-sunset-xlarge.png</li>
                                      <li>body-back.png</li>
                                      <li>my-photo.jpg</li>
                                  </ul>
                              </li>
                              <li>
                                  resources
                                  <ul>
                                      <li>
                                          pdf
                                          <ul>
                                              <li>brochure.pdf</li>
                                              <li>prices.pdf</li>
                                          </ul>
                                      </li>
                                      <li>zip</li>
                                  </ul>
                              </li>
                              <li>about.html</li>
                              <li>contacts.html</li>
                              <li>index.html</li>
                              <li>portfolio.html</li>
                              <li>about.html</li>
...

JavaScript

var $el = $('.references-wrap');
$el.height($el.parent().parent().height());
$el.kendoSplitter({
  orientation: 'vertical',
  panes: [
    // searchbar
    {collapsible: false, resizable: false, size:'41px', scrollable: false},
    // others
    {collapsible: false, resizable: false}
  ]
});
$el = $('.bottom-wrap');
$el.kendoSplitter({
  orientation: 'horizontal',
  panes: [
    // list
    { collapsible: false, resizable: true, size:'15%', min: '5%', max: '30%'},
    // detail
    {collapsible: false, resizable: true}
  ]
});
$el = $('.list-wrap');
$el.kendoSplitter({
  orientation: 'vertical',
  panes: [
    // title
    {collapsible: false, resizable: false, size: '30px'},
    // tree/search
    {collapsible: false, resizable: false}
  ]
});
$el = $('.detail-wrap');
$el.kendoSplitter({
  orientation: 'vertical',
  panes: [
    // detail controls
    {collapsible: false, resizable: false, size: '32px', scrollable: false},
    // detail content
    {collapsible: false, resizable: false}
  ]
});
$el = $('#treeview').kendoTreeView();