JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a" style="width: 300px; height: 200px"> 
    <div id="b" style="height: 55%"> 
        top fixed-height row
    </div> 
    <div id="c" style=""> 
        bottom stretching row (the height should be 500px in this case.) 
    </div> 
</div>

CSS

#a
{
    border: 1px solid black;
    display:table;
}
#b
{
    background-color:red;
    display:table-row;
}
#c
{
    background-color:green;
    display:table-row;
}