JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" value="Change this text!" id="my-input"> I'm standing next to it

JavaScript

$(document).ready(function() {
    var $element = $('#my-input');

    var dummy = $('<span></span>');
    $('body').append(dummy);
    dummy.css('visibility', 'hidden');
    dummy.css('fontFamily', $element.css('fontFamily'));
    dummy.css('fontSize', $element.css('fontSize'));
    dummy.css('fontWeight', $element.css('fontWeight'));
    dummy.css('letterSpacing', $element.css('letterSpacing'));
    
    var resize = function() {
        dummy.html($element.val().replace(/ /g, '&nbsp;'));
        $element.width(dummy.innerWidth() + 1); // it's 1px off for some reason
    };
    
    resize();
    $element.on('keyup', resize);
});