JSFiddle - React, Tailwind, and code Playground

HTML

<table style="width: 300px">
<tr>
    <th>Column 1</th>
    <th>Column 2</th>
</tr>
<tr>
   <td>
       <div class="hideextra" style="width:200px">
                this is the text in column one which wraps</div>
   </td>
   <td>
        <div class="hideextra" style="width:100px">
                this is the column two test</div>
   </td>
</tr>
</table>

CSS

.hideextra { 
    /* white-space: nowrap;  */
    overflow: hidden; 
    text-overflow:ellipsis; 
    display: block;
}