Kendo splitter with fixed toolbar and list view

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css" />

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
    <script src="script.js"></script>
</head>

<body>

    <div id="splitter" style="position: relative;">
        <div>
            <div>
                <div style="width: auto;">
                    <div id="first-toolbar-non-resizable"></div>
                    <div id="firstListView"></div>
                </div>
            </div>
        </div>
        <div>
            <div>
                <div style="width: auto;">
                    <div id="second-toolbar-non-resizable"></div>
                    <div>
                        <div id="secondListView" style="height: 250px; overflow: auto;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="thirdPane">
            <div>
                <div style="width: auto;">
                    <div id="third-toolbar-non-resizable"></div>
                    <div>
                        <div id="thirdListView" style="overflow-y: auto"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <button id="button" type="button">Resize event</button>
</body>

</html>

// Code goes here
$(document).ready(function() {

  $("#splitter").kendoSplitter({
    panes: [ { scrollable: false }, {scrollable: false}, {scrollable: false} ]
  });

  var toolbarOpts = {
      resizable: false,
      items: [
          { type: "button", text: "Button 1" },
          { type: "button", text: "Button 2" },
          { type: "button", text: "Button 3" },
          { type: "button", text: "Button 4" }
      ]
  };
  
  $("#first-toolbar-non-resizable").kendoToolBar(toolbarOpts);
  $("#second-toolbar-non-resizable").kendoToolBar(toolbarOpts);
  $("#third-toolbar-non-resizable").kendoToolBar(toolbarOpts);
  
  $("#firstListView").kendoGrid({
    height: 330,
    pageable: {
      
      info: false
    },
    scrollable: {
      virtual: true
    },
    columns: [ { field: "name", title: "" }],
    dataSource: {
      data: [
          { name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },
      ]
    },
    dataBinding: function(e) {
      this.pager.element.hide();
      $('#firstListView .k-grid-header').hide();
      this.resize(true);
    },
    template: "<div>#:name#</div>"
  });
  $("#secondListView").kendoListView({
     dataSource: {
        data: [
            { name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },
        ]
    },
    template: "<div>#:name#</div>"
  });
  $("#thirdListView").kendoListView({
   dataSource: {
      data: [
          { name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },{ name: "Jane Doe" },{ name: "John Doe" },
      ]
    },
    template: "<div>#:name#</div>"
  });
  var resizePaneFunc = function() {
  console.log(this);
    var pane = $(this).closest(".k-pane");
    console.log(this.position().top);
    console.log(pane.height());
    $(this).outerHeight(pane.height()-this.position().top);
  };
  $("#button").kendoButton({
    click: resizePaneFunc.bind($("#thirdListView"))
  });
  $("#button").click();
});

/* Styles go here */