JSFiddle - React, Tailwind, and code Playground

HTML

<table style="width:100%;">
    <tr>
        <td style="border:1px solid black;width:100px;height:10px;"></td>
        <td style="border:1px solid black;height:10px;"></td>
    </tr>
</table>
<br /><br />

<div class="lineContainer">
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS

.lineContainer {
    overflow: hidden; /* clear the float */
    border: 1px solid #000
}
.lineContainer div {
    height: 10px
} 
.left {
    width: 100px;
    float: left;
    border-right: 1px solid #000
}
.right {
    overflow: hidden;
    background: #ccc
}