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

#root {
  display: flex;
  min-height: 100vh;
  color: #fff;
}

#wrapper {
  flex: 1;
  display: grid;
  grid:
    "title title" min-content
    "divider divider" min-content
    "part1 part2" 1fr
    / 1fr 1fr ; /* calc(50% - 5px) calc(50% - 5px) why the added complexity? */
  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;
}