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 bar content
  bar content
  bar content</div>
  <div class="baz">
    
    baz content
    baz content
        baz content
    baz content
        baz content
    baz content
        baz content
    baz content
        baz content
    baz content
        baz content
    baz content
        baz content
    baz content
        baz content
    baz content
        baz content
    baz content
        baz content
    baz content
        baz content
    baz content
        baz content
    baz content
  </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%;
}