JSFiddle - React, Tailwind, and code Playground

by holden321

HTML

<table>
    <tr>
        <td class="fill">Short</td>
    </tr>
    <tr>
        <td>Some Long String</td>
    </tr>
</table>

CSS

td {
    border:1px solid black;
    text-align:center;
}

JavaScript

fill($("td.fill"));

function fill(td) {
    var table = td.closest("table"),
        content = td.html(),
        width, n = 0;
    td.empty().css("letter-spacing", "");
    width = table.width();
    td.html(content);
    if (td.text().trim()) {
        while (table.width() <= width && 100 > n) td.css("letter-spacing", n += 0.01);
        td.css("letter-spacing", n -= 0.01).css("text-indent", n / 2);
    }
}