JSFiddle - React, Tailwind, and code Playground

by Alex Godofsky

HTML

<table style="border-collapse:collapse;table-layout:fixed">
    <tr>
        <td>stuff here</td>
        <td><!-- empty cell--></td>
        <td>
            <div class='wrapper'>content that should overflow to the right</div>
        </td>
        <td><!-- empty cell--></td>
        <td>more stuff here</td>
    </tr>
    <tr class='row2'>
        <td>stuff here</td>
        <td><!-- empty cell--></td>
        <td style='vertical-align:text-top;position:relative'>
            <div class='inner'>content that should overflow to the left</div>
        </td>
        <td><!-- empty cell--></td>
        <td>more stuff here</td>
    </tr>
</table>

CSS

td {
    border: 1px solid;
    width: 150px;
}

div.wrapper {
    max-width: 150px;
    overflow: visible;
    white-space: nowrap;
    background-color: lightblue;
}

tr.row2 td {
    text-align: right;
}

div.inner {
    position: absolute;
    white-space: nowrap;
    right: 0;
    background-color: lightblue;
}