JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="text_area" rows="2" onkeyup="textarea_resize(event, 15, 2);"></textarea>
<div id="text_area_div"></div>

CSS

#text_area
{
  width: 170px;
  height: 30px;
  overflow: hidden;
  padding: 5px;
  border: 1px solid #000000;
  font-family: Arial;
  font-size: 12px;
  color: #000000;
  resize: none;
}
#text_area_div
{
  width: 170px;
  font-family: Arial;
  font-size: 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
  visibility: hidden;
  position: absolute;
  left: -9999px;
}

JavaScript

function textarea_resize(event, line_height, min_line_count)
{
  var min_line_height = min_line_count * line_height;
  var obj = event.target;
  var div = document.getElementById(obj.id + '_div');
  div.innerHTML = obj.value;
  var obj_height = div.offsetHeight;
  if (event.keyCode == 13)
    obj_height += line_height;
  else if (obj_height < min_line_height)
    obj_height = min_line_height;
  obj.style.height = obj_height + 'px';
}