Default top and bottom pane height will share the total height of page and the divider will be placed accordingly.

Class has-two-pane should be added to .container page shell-left-navigation if two pane is used with left shell navigation

Like this <div class="container page shell-left-navigation has-two-pane">

Example Code

    <div class="container page shell-left-navigation has-two-pane">
      <div class="navigation-pane-left">
        <div class="navigation-content-wrapper">
          <div class="navigation-header">
            .
            .
            .
          </div>
          <div class="navigation-content">
            .
            .
            .
          </div>
        </div>
      </div>
      <div class="divider divider-navigation">
        <span class="handle"></span>
      </div>
      <div class="navigation-pane-right">
        <div class="two-pane-horizontal">
          <div class="pane-top">
            <div class="pane-wrapper">
              <div class="pane">
                <h3 class="title">Two pane - Horizontal</h3>
                <section>
                  <!--Top Pane content goes here-->
                </section>
              </div>
            </div>
          </div>
          <div class="divider twopane-divider-horizontal"></div>
          <div class="pane-bottom">
            <div class="pane-wrapper">
              <div class="pane">
                <!--This is optional. Include only if dark background is required-->
                <div class="pane-header-bg">
                  <h3 class="title">Bottom Panel: Horizontal</h3>
                </div>
                <div class="bottom-content-panel">
                  <!--Bottom Pane content goes here-->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>