JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" value="This is a test dsdsa dasdas dasdasd asdsd" style="width:50px">
    <div class="input-measure"></div>
    
    <input type="text" value="This is a test dsdsa dasdas dasdasd asdsd" style="width:50px">
    <div class="input-measure"></div>

CSS

.input-measure {
    visibility:hidden;
    position:absolute;
    z-index:-10;
}

JavaScript

$('input').hover(function(){
    var temp = $('.input-measure').html($(this).val()).width();
    if($(this).width() < temp && !$(this).is(':focus')){
        $(this).animate({
            textIndent: $(this).width()-temp
        }, 2000);
    }
}, function(){
    $(this).css('text-indent',0);
});

$('input').focus(function(){
    $(this).css('text-indent',0);
});