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;
    flex-direction:column;
}
.popup>.top {
  width: 100%;
  max-height: 60%;
  background: orange;
}
.popup>.bottom {
  position: relative;
  width: 100%;
  bottom: 0;
  background: yellow;
    flex: 1;
}