JSFiddle - React, Tailwind, and code Playground

HTML

<div class=popup>
  <div class=top>
    <input type=text />
    <input type=text />
  </div>
  <div class=bottom>I want to fill the rest of the popup!</div>
</div>

CSS

.popup {
  width: 200px;
  height: 200px;
  background: grey;
  padding: 5px;
  display: flex; /*Added*/
  flex-direction: column; /*Added*/
}
.popup>.top {
  width: 100%;
  max-height: 60%;
  background: orange;
}
.popup>.bottom {
  position: relative;
  width: 100%;
  height: auto;
  bottom: 0;
  background: yellow;
  flex: 1; /*Added*/
}