JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="col1" style="height: 100px;">1</div><!--
 --><div class="col2" style="height: 100%;">2</div>
</div>

==================

<table class="wrapper">
    <tr>
        <td class="col1" style="height: 100px;">1</td>
        <td class="col2" style="height: 100%;">2</td>
    </tr>
</div>

CSS

.wrapper
{
    background: lightcyan;
    /* height: 300px;
    width: 200px; */
}

.col1, .col2 {
    display: inline-block;
    width: 50px;
}

.col1
{
    background: lightgreen;
   
    width: 50px;
}

.col2
{
    background: lightsteelblue;
   
}

td
{
    vertical-align: top;
}