Vertical Splitter bar is not going to the bottom of div on button click

If I click on the Top button, then the vertical splitter bar goes to the top, when I click on the Middle button then the top and bottom pane get 50% values and the bar goes to the center, however, once I click on the Bottom button, my expectation would be for the splitterbar to move to the bottom but it doesn't and I am not seeing what the issue could be.

(() => {
  RunUpdatedSplitters();
  ButtonEvents();
})();

function RunUpdatedSplitters() {

  $('#splitter2').kendoSplitter({
    panes: [{
      size: '8%',
      collapsible: false
    }, {
      size: '100%',
      collapsible: false
    }]
  });

  $('#right-pane2').kendoSplitter({
    orientation: 'vertical',
    panes: [{
      size: '50%',
      collapsible: true
    }, {
      size: '50%',
      collapsible: true
    }],
    resize: (e) => {
      console.log(e);
      const topPane = $("#top-pane2");
      const bottomPane = $("#bottom-pane2");
      console.log("Top Pane", topPane.height());
      console.log("Bottom Pane", bottomPane.height());
    }
  });
}

function ButtonEvents() {
  $("#btnTop").off("click");
  $("#btnTop").on("click", (e) => {
    console.log("Top");
    const splitter = $("#right-pane2").getKendoSplitter();
    //splitter.collapse("#bottom-pane2");
    //splitter.expand("#top-pane2");

    splitter.expand("#bottom-pane2");
    splitter.collapse("#top-pane2");
    splitter.size("#top-pane2", "0%");
  });

  $("#btnMiddle").off("click");
  $("#btnMiddle").on("click", (e) => {
    const splitter = $("#right-pane2").getKendoSplitter();
    splitter.expand("#bottom-pane2");
    splitter.expand("#top-pane2");
    splitter.size("#bottom-pane2", "50%");
    splitter.size("#top-pane2", "48.25%");
    $('#right-pane').css('top', '0px');
  });

  $("#btnBottom").off("click");
  $("#btnBottom").on("click", (e) => {
    const splitter = $("#right-pane2").getKendoSplitter();
    //splitter.collapse("#top-pane2");
    //splitter.expand("#bottom-pane2");

    splitter.expand("#top-pane2");
    splitter.collapse("#bottom-pane2");
    splitter.size("#bottom-pane2", "100%");
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.all.min.js"></script>
<link href="https://kendo.cdn.telerik.com/themes/10.2.0/default/default-main.css" rel="stylesheet" />
<div id="Container2" style="height: calc(100vh - 102px);margin-top: 58px;" class="peek-a-boo-1">
  <div id="plitterContainer" style="height:100%">
    <div id="splitter2" style="height: 100%;">
      <div id="left-pane2">
        <div id="btns">
          <button id="btnTop">Top</button>
          <button id="btnMiddle">Middle</button>
          <button id="btnBottom">Bottom</button>
        </div>
      </div>
      <div id="right-pane2" style="overflow:hidden !important;">
        <div id="top-pane2" style="height: 45%; margin-top:30px; background-color:green;">
        <div id="bottom-pane2" style="background-color:darkcyan;height:45%;">
          
        </div>
      </div>
    </div>
  </div>
</div>

It sounds like you want the following behavior:

1. Clicking on the "top" button will force the top pane to fill the entire splitter
2. Clicking on the "middle" button will force the top and bottom pane to both fill equal parts of the splitter
3. Clicking on the "bottom" button will force the bottom pane to fill the entire splitter

If that's the case, then this is the logic you'll need to apply:

1. For the top button: collapse the bottom pane and expand the top pane
2. For the middle button: expand both panes and size both panes to 50%
3. For the bottom button: collapse the top pane and expand the bottom pane

Here is the relevant API documentation for every method you'll need to leverage:

• collapse method
• expand method
• size method

Demo: https://dojo.telerik.com/sJeoSduV

<div id="splitter-horizontal">
  <div>
    <button id="button-top">Top</button>
    <button id="button-middle">Middle</button>
    <button id="button-bottom">Bottom</button>
  </div>
  <div>
    <div id="splitter-vertical">
      <div></div>
      <div></div>
    </div>
  </div>
</div>

$(() => {
  const splitterVertical = $('#splitter-horizontal').kendoSplitter({
    panes: [
      { collapsible: false },
      { collapsible: false }
    ]
  }).data('kendoSplitter');
  const splitterHorizontal = $('#splitter-vertical').kendoSplitter({
    panes: [
      { collapsible: true },
      { collapsible: true }
    ],
    orientation: 'vertical'
  }).data('kendoSplitter');
  $('#button-top').kendoButton({
    click: () => {
      // collapse bottom and expand top
      const bottomPane = splitterHorizontal.element.find('.k-pane:last');
      splitterHorizontal.collapse(bottomPane);
      
      const topPane = splitterHorizontal.element.find('.k-pane:first');
      splitterHorizontal.expand(topPane);
    }
  });
  $('#button-middle').kendoButton({
    click: () => {
      // expand both and resize to 50%
      splitterHorizontal.expand('.k-pane');
      const topPane = splitterHorizontal.element.find('.k-pane:first');
      splitterHorizontal.size(topPane, '50%');
      const bottomPane = splitterHorizontal.element.find('.k-pane:last');
      splitterHorizontal.size(bottomPane, '50%');
    }
  });
  $('#button-bottom').kendoButton({
    click: () => {
      // collapse top and expand bottom
      const topPane = splitterHorizontal.element.find('.k-pane:first');
    splitterHorizontal.collapse(topPane);
      const bottomPane = splitterHorizontal.element.find('.k-pane:last');
      splitterHorizontal.expand(bottomPane);
    }
  });
});