JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <input type="text" id="inputbox" name="input" placeholder="yes" />
</div>
<div id="counter"></div>

CSS

input {
    margin-left:3em;
    min-width:100px;
    max-width:600px;
}

JavaScript

function Expander() {

    this.start = function () {

        $("#inputbox").keydown(function(e) {

            this.style.width = 0;
            var newWidth = this.scrollWidth + 10;

            if( this.scrollWidth >= this.clientWidth )
            newWidth += 10;

            this.style.width = newWidth + 'px'

        });

    }

}


$(function() {
    window.app = new Expander();
    window.app.start();
}