JSFiddle - React, Tailwind, and code Playground
HTML
<textarea id="comments" cols="50" rows="1"></textarea>
CSS
textarea{overflow:hidden}
JavaScript
var element = document.getElementById('comments');
var retractsAutomatically = false;
var sizeOfOne = element.clientHeight;
element.rows = 2;
var sizeOfExtra = element.clientHeight - sizeOfOne;
element.rows = 1;
var resize = function() {
var length = element.scrollHeight;
if (retractsAutomatically) {
if (element.clientHeight == length)
return;
}
else {
element.rows = 1;
length = element.scrollHeight;
}
element.rows = 1 + (length - sizeOfOne) / sizeOfExtra;
};
//modern
if (element.addEventListener)
element.addEventListener('input', resize, false);
//IE8
else {
element.attachEvent('onpropertychange', resize)
retractsAutomaticaly = true;
}