JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr class="tr">
        <th class="th">
            <div class="div green">This div is short</div>
        </th>
        <th class="th">
            <div class="div blue">This div has more content so it pushes 
            the height of the whole row. However, the shorter div doesn't 
            stretch to the whole row. How do I fix this?</div>
        </th>
    </tr>
</table>

CSS

.tr {
    width:100%;
    border:1px solid red;
    height:auto;
}
.th {
    display:table-cell;
    width:50%;
}
.div {
    /* What should be here? */
}
.green {
    background:green
}
.blue {
    background:blue
}