JSFiddle - React, Tailwind, and code Playground

HTML

<div class="text-block" contenteditable="true" spellcheck="false">Some Text SpellCheck</div>
<div class="solutions">
    <h2>Solution 0</h2>
    <textarea id="Solution0" rows="1" spellcheck="false"></textarea>
</div>

<div id="info"></div>

CSS

.text-block {
    resize: none;
    font-size:40px;
    border: none;
    line-height: 1;
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    min-width: 30px;
    overflow: visible;
    white-space: nowrap;
    display: inline-block;
}

div.solutions { padding:.5em; }

#Solution0 {
    height: 1.2em;
}

JavaScript

$("#Solution0").keyup(function(e) {
    info = "ScrollHeight: " + this.scrollHeight + "<br />";
    info += "OuterHeight: " + $(this).outerHeight()  + "<br />";
    info += "OuterWidth: " + $(this).outerWidth()  + "<br />";
    $("#info").html(info);
    
    while($(this).outerHeight() < this.scrollHeight) {
        $(this).width($(this).width()+50);
    };
});