JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th class="shrink">From</th>
            <th class="expand">Subject/Body</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="shrink">Mark</td>
            <td class="expand">
                <div class="container">
                    <div class="ellipsis">
                        <span class="subject">Lorem Ipsum</span>
                         <span class="body"> &ndash; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt aliquet libero quis tempus. Vivamus id est purus. Nulla augue neque, vestibulum in vestibulum vitae, ornare vel nisi. Nullam non dolor tincidunt, mattis metus ac, feugiat sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer mollis leo in tristique consectetur. Quisque non imperdiet neque. Nunc fermentum neque sit amet nulla interdum vestibulum. Sed ac tempus dolor.</span>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS

table {
    border-collapse: collapse;
}
th, td {
    border: 1px solid black;
    text-align: left;
}
.shrink {
    white-space: nowrap;
}
.expand {
    width: 99.999%;
}
.container {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.ellipsis {
    display: table-cell;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}