JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id='ta'>t</textarea>

JavaScript

document.getElementById('ta').addEventListener('input', autoHeight, false);
document.addEventListener('DOMContentLoaded', function(){document.getElementById('ta').style.height = getLineHeightInPixels(document.getElementById('ta')) + 'px';}, false);

function autoHeight(e){
    var lh = getLineHeightInPixels(e.target);
    var nol = getNumberOfLines(e.target);
    var ht = lh * nol;
    e.target.style.height = ht + 'px';
}

function getNumberOfLines(el){
    var text = el.value
    var lines = text.split(/\r|\r\n|\n/);
    console.log(lines.length);
    return lines.length;
}
			
			
function getLineHeightInPixels(el){
    
    var tempDiv = document.createElement('div');
    
    tempDiv.style.visibility = 'hidden';
    
    tempDiv.style.fontFamily = getComputedStyle(el).getPropertyValue('font-family');
    tempDiv.style.fontSize = getComputedStyle(el).getPropertyValue('font-size');
    tempDiv.style.lineHeight = getComputedStyle(el).getPropertyValue('line-height');
    tempDiv.style.fontVariant = getComputedStyle(el).getPropertyValue('font-variant');
    tempDiv.style.fontStyle = getComputedStyle(el).getPropertyValue('font-style');
    
    tempDiv.innerText = 'abcdefghijklmnopqrstuwxyz';
    
    document.documentElement.appendChild(tempDiv);
    
    var ht = parseInt(getComputedStyle(tempDiv).getPropertyValue('height'))
    
    document.documentElement.removeChild(tempDiv);
    return (ht);
    
}