JSFiddle - React, Tailwind, and code Playground

by simevidas

HTML

<table>
    <tr>
        <td>Fixed 150px cell</td>
        <td class="foo">
            <input class="foo__input">
            <span></span>                
        </td>
    </tr>
</table>

CSS

* { box-sizing: border-box }
body { margin: 3em 1em }
table { width: 100%; outline: 2px solid red }
input { border: 2px solid blue }
td:first-child { width: 150px }

.foo {
    display: flex
}
.foo__input {
    flex-grow: 1
}

JavaScript

function randomString(limit) {
    var s = "";
    var len = limit * Math.random();
    while (s.length < len) s += String.fromCharCode(97 + 26 * Math.random());
    return s;
}

function changeIt() {
    $("span").text(randomString(20));
}

changeIt();
window.setInterval(changeIt, 1000);