JSFiddle - React, Tailwind, and code Playground

HTML

for two divs: <br />
<div class="parent">
    <div class="first"></div>
    <div class="second"></div>    
</div>
<br /><br /> for table <br /> 
<div class="parent">
    <div class="first"></div>
    <div class="second">
        <table cellspacing="5" cellpadding="5">
            <tbody>
            <tr>
                <td>second</td>
                <td>second</td>
            </tr>
            <tr>
                <td>second</td>
                <td>second</td>
            </tr>
            <tr>
                <td>second</td>
                <td>second</td>
            </tr>
            <tr>
                <td>second</td>
                <td>second</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

/*.parent {overflow: hidden; white-space:nowrap;}*/

.first {background: red; width: 100px; height: 30px; float: left;}
.second {background: blue; height: 30px; color: #000; overflow: hidden;}

table {background: #f0f0f0; opacity: 0.7; width: 100%; table-layout: fixed;}
table td {width: 77%;}