JSFiddle - React, Tailwind, and code Playground

HTML

<input id="test" /><span id="width"></span>

CSS

#test {font-size: 30px;}

JavaScript

$('#test').on('keyup', function() {
    var el = $('<div />', {
        text : this.value, 
        css  : {
            display       : 'table-cell'
        }
    }).appendTo('body');
    
    var computedStyle = typeof this.currentStyle != 'undefined' ? 
            this.currentStyle : 
            document.defaultView.getComputedStyle(this, null);
    
    $.each(computedStyle, function(_, style) {
        if (style.indexOf('display') == -1 && style.indexOf('width') == -1)
            el.get(0).style[style] = computedStyle[style];
    });
    
    var w = el.prop('clientWidth');
    $(el).remove()
    $('#width').html(w + 'px')
});