JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

input{
    display:block;
    font-size:12px;
    font-family: serif;
    font-size: 12pt;
}
#resizer {
    position: absolute;
    left: -10000px;
    top: 0px;
    font-family: serif;
    font-size: 12pt;
}

JavaScript

function resize(elem){
    var resizer = document.getElementById('resizer');
    resizer.innerHTML = elem.value;
    setTimeout(function() {
        finishResizing(elem, resizer);
    }, 0);
}
function finishResizing(elem, resizer) {
    $(elem).css({
        width: ($(resizer).width() + 20) + "px"
    });
}


var elem=document.getElementsByTagName('input');
for(i in elem){
    elem[i].addEventListener('keyup', function(){resize(this);}, false);
    resize(elem[i]);
}