JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="">
    <p>
        <input name="title" type="text" maxlength="256" value="daniel">
        <input name="description" type="text" maxlength="512" value="awesome">
    </p>
</form>

CSS

input {
    display:block;
    font: normal 12px Helvetica, sans-serif;
}

.input-test {
    display: inline;
    font: normal 12px Helvetica, sans-serif;
    visibility: hidden;
}

JavaScript

var autoResize = {
    minWidth: 30,
    maxWidth: 400,
    buffer: 10,
    
    resize: function(el) {
        var test = document.createElement('pre');
        test.className = 'input-test';
        test.innerHTML = el.value;
        el.parentNode.appendChild(test);
        el.style.width = Math.min(Math.max(test.offsetWidth + this.buffer, this.minWidth), this.maxWidth) + 'px';
        el.parentNode.removeChild(test);
    },
    
    init: function() {
        var els = document.getElementsByTagName('input'),
            i = els.length;
        
        while (i--) {
            els[i].addEventListener('keydown', function() {
                autoResize.resize(this);
            }, false);
            
            els[i].addEventListener('keyup', function() {
                autoResize.resize(this);
            }, false);
            
            this.resize(els[i]);
        }
    }
};

autoResize.init();