JSFiddle - React, Tailwind, and code Playground

HTML

<h1>The Table:</h1>
<table width="100%">
    <tr>
        <td class="hey">Hey there:</td>
        <td class="wrap">This is a line that ought to wrap when it won't fit.</td>
    </tr>
</table>

<h1>Div Example A:</h1>

<div class="hey exA">Hey there:</div>
<div class="wrap exA">This is a line that ought to wrap when it won't fit.</div>

<h1>Div Example B:</h1>

<div class="hey exB">Hey there:</div>
<div class="wrap exB">This is a line that ought to wrap when it won't fit.</div>

<h1>Div Example C:</h1>

<div class="hey exC">Hey there:</div>
<div class="wrap exC">This is a line that ought to wrap when it won't fit.</div>

<h1>Div Example D:</h1>

<div class="hey exD">Hey there:</div>
<div class="wrap exD">This is a line that ought to wrap when it won't fit.</div>

CSS

.hey.exA{
    width:18%;
}
.wrap.exA {
    width:82%;
}
.exB{
    width:50%;
}

.wrap.exD {
    float:right;
}
.hey { background-color: green; }
.wrap { background-color: orange; }
div {float:left;
    margin-left:-1px;
    margin-right:-1px;}
td {vertical-align: top;}
h1 {clear:both;
    padding: 5px 0 3px 0;
    border: none;}

JavaScript

/* 

If you slide the width of the HTML panel narrower, you will see that the table (the first one) has several convenient qualities:

1. Automatically finds a good place to split the two cells, giving the cell with more content a larger percentage of the available width.
2. Fills all of the available width 100%.
3. When deciding which of the cells to wrap, it does so in the way most efficient with regards to vertical space.
4. Keeps the two cells aligned horizontally no matter what.

Example A does not have quality 1.
Example B does not have quality 1 or 3.
Example C does not have quality 2 or 4. 
Example D does not have quality 1 or 4. 
    
*/