JSFiddle - React, Tailwind, and code Playground

HTML

<input id="inpt" type="text" />
<div id="inpt-width"></div>

JavaScript

$.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl =      $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width(); 
};

$('#inpt, #inpt2, #inpt3').on('input', function() {
    var padding = 10; //Works as a minimum width
    var valWidth = ($(this).textWidth() + padding) + 'px';
    $('#'+this.id+'-width').html(valWidth);
    $('#inpt').css('width', valWidth);
}).trigger('input');

$('#inpt4-width').html($.fn.textWidth('Pass string without element', '13px arial') + 'px');