JSFiddle - React, Tailwind, and code Playground

HTML

<section id="root">
  <section id="wrapper">
    <div id="title">Title</div>
    <div id="divider"><hr></div>
    <div id="part1">Part 1</div>
    <div id="part2">Part 2</div>
  </section>
</section>

CSS

body {
  display: flex;
  min-height: 100vh;
}

#root {
  flex: 1;
  display: flex;
  flex-direction: column;
  color: #fff;
}

#wrapper {
  flex: 1;
  display: grid;
  grid:
    "title title" min-content
    "divider divider" min-content
    "part1 part2" 1fr
    / calc(50% - 5px) calc(50% - 5px);
  background-color: #003300;
  grid-gap: 10px;
}

#title {
  grid-area: title;
}

#divider {
  grid-area: divider;
}

#part1 {
  grid-area: part1;
}

#part2 {
  grid-area: part2;
} 

#part1, #part2 {
  background-color: #ff0000;
}

body {
  margin: 0;
}