JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sheet">
  <div id="header">
    Curriculum Vitae
    <br/>line 2
    <br/>line 3
    <br/>line 4
    <br/>line 5
    <br/>line 6
    <br/>line 7
  </div>
  <div id="container">
    <div id="row">
      <div class="cell">a
      </div>
      <div class="cell">b
      </div>
    </div>
  </div>
  <div id="footer">
    Footer
    <br/>line 1
    <br/>line 2
    <br/>line 3
    <br/>line 4
    <br/>line 5
    <br/>line 6
    <br/>line 7
    <br/>line 8
    <br/>line 9
    <br/>line 10
    <br/>line 11
  </div>
</div>

CSS

body {
  padding: 0;
  margin: 0;
}
#sheet {
  width: 11in;
  height: 8.5in;
  display: table;
  table-layout: fixed;
}
#header {
  background-color: blue;
}
#footer {
  background-color: purple;
}
#container {
  display: table;
  table-layout: fixed;
  height: 100%;
}
#row {
  display: table-row;
  background-color: yellow;
}
.cell {
  position: relative;
  display: table-cell;
  padding: 10px;
  width: 5.5in;
  background-color: green;
}