JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wizard">
  <nav class="wizard__sidebar">
    <ul>
      <li>step 1</li>
      <li>step 2</li>
    </ul>
  </nav>
  <div class="wizard__container">
    <section>
      <header class="wizard__header">
      header title
      </header>
      <div class="wizard__content">
      content
      </div>
      <footer class="wizard_footer">
      prev ± next
      </footer>
    </section>
  </div>
</div>

SCSS

* {
  border-sizing:border-box;
}

html,body {
  height:100%;
}

/* ^ Ignore top two ^*/

.wizard {
  width:80%;
  height:50%;
  display:table;
  margin:0 auto;
  > * {
    height:100%;
    display:table-cell;
    vertical-align:top;
  }
  &__sidebar {
    background:gray;
    width:30%;
  }
  &__container {
    background:white; 
    width:60%;
    > section {
      display:table;
      width:100%;
      height:100%;
      > * {
        display:table-row;
      }
    }
  }
  &__header {
    background:blue;
    height:60px;
  }
  &_footer {
    background:lightblue;
    height:30px;
  }
}