JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="area"></textarea>

CSS

#area {
  overflow: hidden;
  resize: none;
}

textarea, .fake {
  font-family: Arial;
  font-size: 13px;
}

textarea {
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
}

.fake {
  display: none;
  word-wrap: break-word;
}

JavaScript

let area = document.getElementById('area');
  let fake = document.createElement('div');
  
  fake.className = 'fake';
  fake.style['min-height'] = area.clientHeight + 'px';
  
  document.body.appendChild(fake);
 
  area.addEventListener('input', function () {
    fake.style.width = area.clientWidth + 'px';
  	fake.innerHTML = area.value.replace(/\n/g, '<br>');
    fake.style.display = 'block';
    area.style.height = fake.clientHeight + 'px';
    fake.style.display = 'none';
  });