JSFiddle - React, Tailwind, and code Playground

HTML

<div >
    <table>
    <tr>
        <td>
1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
         </td>
        <td>
2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
         </td>
    </tr>
</table>
</div>

<div class="table-row">
    <table>
    <tr>
        <td>
1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
         </td>
        <td>
2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
         </td>
    </tr>
</table>
</div>

CSS

div {
    width:250px; 
    background-color:red;
}

table {
    table-layout: fixed; width: 100%
}

td {   
    word-wrap: break-word
}

.table-row td{
    display:table-row;    
}

.table-row {
    background-color:green;   
}