JSFiddle - React, Tailwind, and code Playground

by adeneo

HTML

<input type="text" id="first" name="first" size="11" value="this has 11">
<br>
<input type="text" id="second" name="second" size="11" value="12345678901">
<br>
<input type="text" id="third" name="third" size="22" value="this has 22 characters">
<br>
<input type="text" id="jQ" name="jQ" value="text, text, text">

JavaScript

$("#jQ").on('input', function() {
    $(this).css('width', function() {
        var el = $('<span />', {
            text : this.value, 
            css  : {left: -9999, position: 'relative'}
        }).appendTo('body');
        var w = el.css('width');
        el.remove();
        return w;
    }).css('position', 'relative');
}).trigger('input');