JSFiddle - React, Tailwind, and code Playground

HTML

<h2> Flex </h2>
<div id="test1">
    <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>
</div>
<br />
<h2> Table </h2>
<div id="test2">
    <div class=popup>
        <div class="row">
            <div class=top>
                <input type=text />
                <input type=text />
            </div>
        </div>
        <div class="row">
            <div class=bottom>I want to fill the rest of the popup!</div>
        </div>
    </div>
</div>

CSS

.popup {
    width: 200px;
    height: 200px;
    background: grey;
    padding: 5px;
}
.popup .top {
    width: 100%;
    background: orange;
}
.popup .bottom {
    position: relative;
    width: 100%;
    background: yellow;
    height: 100%;
}
#test1 .popup {
    display: flex;
    flex-direction: column;
}
#test1 .popup>.bottom {
    flex: 1;
}
#test2 .popup {
    display:table;
}
#test2 .popup > .row {
    display:table-row;
}
#test2 .popup > .row > div {
    display:table-cell;
}