JSFiddle - React, Tailwind, and code Playground

HTML

<table>
      <tr>
        <td>
         <div class="truncate">
           <h1 class="truncated">I'm getting truncated because I'm way too long to fit</h1>
         </div>
        </td>
        <td class="some-width">
           I'm just text
        </td>
      </tr>
    </table>

CSS

table {
    width: 300px;
}

td {
    border: 1px solid black;
}

.truncate {
    display: table;
    table-layout: fixed;
    width: 100%;
}

h1.truncated {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

td.some-width {
    width: 30%;
}