JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.css">
<div class="d-flex flex-column h-100">
  <div class="p-2 d1">Flex item 1</div>
  <div class="p-2 d6 flex-grow-1 d-flex position-relative">
    <div class="inner h-100 flex-grow-1">
      background-color: green;
    </div>
  </div>
</div>

CSS

html,body{
  height: 100%;
}
.d1 {
  background-color: yellow;
}
.d6 {
  background-color: green;
}
.inner {
  background-color: red;
}