JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<body>
    <table>
        <tr>
            <td style="background-color:cyan">
                <div class="fill pink">Pink</div>
                <div class="content pink">Pink</div>
                <div class="fill green">Green</div>
                <div class="content green">Green</div>
            </td>
            <td style="background-color:cyan">
                <div style='font-size: 40pt; background-color:yellow;'>
                    Big yellow text
                </div>
            </td>
            </tr>
  </table>
</body>
</html>

CSS

table td {
    padding: 0;
    position:relative;
    vertical-align:baseline;
} 
td div.content {
    position:relative;
    display: inline-block;
}
td div.fill{
    display: inline-block;
    height:100%;
    position:absolute;
    top:0px;
}
div.pink {
    background-color:pink;
}
div.green{
    background-color:green;
}
div.fill.pink {
    color:pink;
}
div.fill.green{
    color:green;
}