JSFiddle - React, Tailwind, and code Playground

by suhail

HTML

<table>
    <tr>
        <td class="qty">34</td>
        <td class="dsc">Melange</td>
        <td class="price">15.00</td>
    </tr>
    <tr>
        <td class="qty">34</td>
        <td class="dsc">An incredibly long name for a product intended for testing</td>
        <td class="price">15.00</td>
    </tr>
</table>
<div class="dsc">An incredibly long name for a product intended for testing</div>

CSS

table {
    width: 100%;
    table-layout: fixed;
}

.qty {
    width:10%;
    text-align: right;
    padding-right:4px;
}
.price {
    width: 30%;
    text-align: right;
}
.dsc {
    text-overflow: ellipsis;
    /* white-space: nowrap; */
    overflow: hidden;
    width:60%;
    max-width:60%;
}