JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>xioup Elastic Text Input</title>
    </head>
    <body id="body">
        <form method="post" id="theForm">
            <label for="test">This is an elastic text input: </label>
            <input type="text" id="test" name="test input" value="teshhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhht" size="4" style="font-family:Consolas;" />
            <p>&nbsp;</p>
            <p>Works great in Chrome, not so great in FireFox. I need to find out how to update the scroll position of the input in FireFox, or else make 100% sure that the leftmost characters don't scroll out of the input when typing very fast.</p>
        </form>
    </body>
</html>

JavaScript

$().ready(function() {

    var textInputMinLength = 1,
        textInputMaxLength = 150,
        textTrailingSpaces = 0;

    function elasticTextInput(theTarget) {
        var myTextLength = $(theTarget).val().length + textTrailingSpaces;
        myTextLength = myTextLength > textInputMinLength ? myTextLength : textInputMinLength;
        myTextLength = myTextLength < textInputMaxLength ? myTextLength : textInputMaxLength;
        $(theTarget).attr('size', myTextLength);
    }

    var allTextInputs = $('#theForm input:text');
    $(allTextInputs).keyup(function() {
        elasticTextInput($(this));
    });

});