JSFiddle - React, Tailwind, and code Playground

by wojtiku

HTML

<body>
    <table id="table">
        <tr>
            <td id="wrap">
        <div class="right">Right long long long</div>
        <div class="left">Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left</div>
            </td>
        </tr>
                <tr>
            <td id="wrap">
        <div class="right">Right</div>
        <div class="left">Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left</div>
                
            </td>
        </tr>
    </table>
</body>

CSS

#table {
    width: auto;
}

#wrap
{
    width: 100%;
}
.left,
.right {
    padding:5px;
}

.left {
    text-align:left;
    display: block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.right {
    background-color:#f5f5f5;
    border-radius: 3px;
    float:right;
    text-align:right;
	white-space: nowrap;
}