JSFiddle - React, Tailwind, and code Playground

HTML

<flex-fixed>
  <sections>
    <section>Section 1</section>
    <section>Section 2</section>
    <section>Section 3</section>
    <div>Add Section</div>
  </sections>
  <splitter></splitter>
  <pages>
    <page>Page 1</page>
    <page>Page 2</page>
    <page>Page 3</page>
    <div>Add Page </div>
  </pages>
</flex-fixed>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

flex-fixed, sections, section, div, pages, page {
  display: flex;
}

body {
  height: 100vh;
}

flex-fixed {
  width: 100%;
  height: 100%;
  flex-direction: column; 
  position: fixed;
}

section {
  border-right: 1px solid lightgrey;
}

splitter {
  height: 1px;
  background: lightgrey;
}

pages {
  height: 100%;
  border-left: 1px solid lightgrey;
  align-self:flex-end; 
  flex-direction: column;
}

page {
  border-bottom: 1px solid lightgrey;
}

section, page, div {
  padding: 10px;
}