JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
    <style type="text/css">
    .col
    {
        overflow:hidden; 
        text-overflow : ellipsis; -ms-text-overflow : ellipsis; -o-text-overflow : ellipsis;
    }
    .ted {
        width: 50px;
        border: 1px solid orange;
        display: block;
    }
    .row
    {
        width: 50px;
    }
    .table
    {
        white-space: nowrap;
        width: 100%;
    }
    </style>
</head>
<body>
<table class="table">
    <tr class="row">
        <td class="ted"><div class="col">This is some text in row 1 column 1, This is some text in row 1 column 1</div></td>
        <td class="ted"><div class="col">This is some text in row 1 column 2, This is some text in row 1 column 1</div></td>
    </tr>
    <tr class="row">
        <td class="col">here is row 2 column 2</td>
    </tr>
</table>
</body>
</html>