JSFiddle - React, Tailwind, and code Playground

HTML

<div style="min-height:40px; border:solid 1px black; display:table-row; width:100%; ">
    <div style="border:solid 1px black; height:auto; display:table-cell;   width:50%;  ">
    First to set height
            First to set height    First to set height
            First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height
        First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    First to set height    </div>
    
    <div style="border:solid 1px red;   height: 100%; display:table-cell;">
    Why don't get the 100%
    </div>
</div>