JSFiddle - React, Tailwind, and code Playground

HTML

<div class="foo">
  <div class="bar">bar content
  bar content
  bar content
  bar content
   bar content
  bar content
  bar content
   bar content
  bar content
  bar content
   bar content
  bar content
  bar content
   bar content
  bar content
  bar content
   bar content
  bar content
  bar content bar content
  bar content
  bar content</div>
  <div class="baz"></div>
</div>

CSS

.foo {
  height: 200px;
  background-color: #ccc;
  display: flex;
  flex-direction: column;
}

.bar {
  background-color: GoldenRod;
}

.baz {
  background-color: Aquamarine;
  flex: 1;
}

.bar,
.baz {
  width: 100%;
}