JSFiddle - React, Tailwind, and code Playground

HTML

<input id="my_input" value="Type Here">

CSS

input {
      font: 100px Georgia, serif;
      width: 80%;
      height: 300px;
            line-height: 30px;
            text-align: center;
            position: absolute;
            border-width: 0;
            margin-right: 5%;
            margin-left: 5%;
            top: 25%;
}

*:focus {
    outline: none;
}

JavaScript

// txt is the text to measure, font is the full CSS font declaration,
// e.g. "bold 12px Verdana"
function measureText(txt, font) {
    var id = 'text-width-tester',
        $tag = $('#' + id);
    if (!$tag.length) {
        $tag = $('<span id="' + id + '" style="display:none;font:' + font + ';">' + txt + '</span>');
        $('body').append($tag);
    } else {
        $tag.css({font:font}).html(txt);
    }
    return {
        width: $tag.width(),
        height: $tag.height()
    }
}

function shrinkToFill(input, fontSize, fontWeight, fontFamily) {
    var $input = $(input),
        txt = $input.val(),
        maxWidth = $input.width(),
        font = fontWeight + " " + fontSize + "px " + fontFamily;
    // see how big the text is at the default size
    var textWidth = measureText(txt, font).width + measureText(txt, font).width*.1; //padding to try to prevent cutoff letters?
    if (textWidth > maxWidth) {
        // if it's too big, calculate a new font size
        // the extra .9 here makes up for some over-measures
        fontSize = fontSize * maxWidth / textWidth * .9;
        font = fontWeight + " " + fontSize + "px " + fontFamily;
        // and set the style on the input
        $input.css({font:font});
    } else {
        // in case the font size has been set small and 
        // the text was then deleted
        $input.css({font:font});
    }
}

$(function() {
    $('#my_input').keyup(function() {
        shrinkToFill(this, 100, "", "Georgia, serif");
    })
});