Dynamically expand height of input type “text” based on number of characters typed into field

Question

Similar to the below JSFiddle (which I bookmarked and do not know from where the original question emerged):

http://jsfiddle.net/mJMpw/6/

Answer 1

Not mine but works great:

CSS

textarea {
     color: #444;
     padding: 5px;
}
.txtstuff {
    resize: none;
    overflow: hidden;
}
.hiddendiv {
    display: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word
}
.common {
    width: 500px;
    min-height: 50px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    overflow: hidden;
}
.lbr {
    line-height: 3px;
}

HTML

SCRIPT

let txt = $('#comments'),
    txt.addClass('txtstuff');
let hiddenDiv = $(document.createElement('div')),
    hiddenDiv.addClass('hiddendiv common');
let content = null;

$('body').append(hiddenDiv);

txt.on('keyup', function () {
    content = $(this).val();
    content = content.replace(/\n/g, '
');
    hiddenDiv.html(content + '
');
    $(this).css('height', hiddenDiv.height());
});

FIDDLE