causeway-standard-theme/causeway/docs/shells/twopane-horizontal.html

<div class="two-pane-horizontal">
  <ul class="nav nav-tabs hidden-lg hidden-md">
    <li class="active">
      <a href="#pane1" data-toggle="tab"> Pane 1 </a>
    </li>
    <li>
      <a href="#pane2" data-toggle="tab"> Pane 2 </a>
    </li>
  </ul>
  <div class="pane-top">
    <div class="pane-wrapper">
      <div class="pane">
        <h1 class="title">Two pane - Horizontal</h1>
        <section>
          <p>Default top and bottom pane height will share the total height of page and the divider will be placed accordingly.</p>

          <p><strong> Example Code</strong></p>
<pre><code>
&lt;div class=&quot;two-pane-horizontal&quot;&gt;
&lt;div class=&quot;pane-top&quot;&gt;
  &lt;div class=&quot;pane-wrapper&quot;&gt;
    &lt;div class=&quot;pane&quot;&gt;
      &lt;h3 class=&quot;title&quot;&gt;Two pane - Horizontal&lt;/h3&gt;
      &lt;section&gt;
        &lt;!--Content Goes Here--&gt;
      &lt;/section&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;divider twopane-divider-horizontal&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;pane-bottom&quot;&gt;
  &lt;div class=&quot;pane-wrapper&quot;&gt;
    &lt;div class=&quot;pane&quot;&gt;
      &lt;div class=&quot;pane-header-bg&quot;&gt;
        &lt;h3 class=&quot;title&quot;&gt;Bottom Panel: Horizontal&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class=&quot;bottom-content-panel&quot;&gt;
        &lt;!--Content Goes Here--&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
        </section>
      </div>
    </div>
  </div>
  <div class="divider twopane-divider-horizontal"></div>
  <div class="pane-bottom">
    <div class="pane-wrapper">
      <div class="pane">
        <h1 class="title">Bottom Panel: Horizontal</h1>
        <div class="bottom-content-panel">

        </div>
      </div>
    </div>
  </div>
</div>