JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 10 }' />

CSS

input {
    width: 50px;
    min-width: 50px;
    max-width: 300px;
    transition: width 0.25s;    
}

input, .getWidth {
    font-family:arial;
    font-size:12px;
    font-weight:normal;
    letter-spacing:normal;
    padding:3px;
}

JavaScript

$('input[type="text"]').on('keyup',function(){
    var text = $(this).val();
    var getWidth = $('<span class="getWidth" style="white-space:nowrap; width:auto;">' + text + '</span>').insertAfter(this);
    $(this).css({'width':getWidth.outerWidth()}).next('.getWidth').remove();
});