JSFiddle - React, Tailwind, and code Playground

by kazu69

HTML

<input type="text" />
<span style="display:none"></span>

CSS

input, span {
    padding:0;
    font-size:9px;
    font-family:Sans-serif; 
    white-space:pre;
}
/* it's important they have same styling */

JavaScript

$('input[type="text"]').keypress(function(e) {
    if (e.which !== 0 && e.charCode !== 0) { // only characters
        var c = String.fromCharCode(e.keyCode|e.charCode);
        $span = $(this).siblings('span').first();
        $span.text($(this).val() + c) ; // the hidden span takes 
                                        // the value of the input
        $inputSize = $span.width() ; 
        $(this).css("width", $inputSize) ; // apply width of the span to the input
     }
}) ;