JSFiddle - React, Tailwind, and code Playground

HTML

<input id="exp1" type="text" />
<br/>
<input id="exp2" type="text" value="H" />
<br/>
<input id="exp3" type="text" value="Hello!" />
<br/>

CSS

#exp1 {
    font-size: 12pt;
    font-family: verdana;
}
#exp2 {
    font-size: 17pt;
    font-family: courier;
}
#exp3 {
    font-size: 24pt;
    font-family: times;
}

JavaScript

(function ($) {
    var pluginName = 'expandable';
    $.fn[pluginName] = function () {
        return this.each(function (i, input) {
            var $input = $(input);
            if (!$input.filter("input[type='text']").length) return true;

            // Common css directives affecting text width
            // May not be 100% comprehensive
            var css = {
                fontFamily: $input.css('fontFamily'),
                fontSize: $input.css('fontSize'),
                fontStyle: $input.css('fontStyle'),
                fontVariant: $input.css('fontVariant'),
                fontWeight: $input.css('fontWeight'),
                fontSizeAdjust: $input.css('fontSizeAdjust'),
                fontStretch: $input.css('fontStretch'),
                letterSpacing: $input.css('letterSpacing'),
                textTransform: $input.css('textTransform'),
                textWrap: 'none'
            };
            var $m = $("<span/>").text('M').appendTo("body").css(css).text('M').hide();
            var data = {
                'm': $m,
                    'w': $m.width()
            };
            $input.data(pluginName, data).keyup(function (e) {
                $this = $(this);
                var data = $this.data(pluginName);
                var w = data.m.html($this.val().replace(/\s/g, "&nbsp;")).width();
                $this.css({
                    'width': w + data.w
                });
            }).trigger('keyup');
        });
    };
})(jQuery);

$(document).ready(function () {
    $('input').expandable();
});