JSFiddle - React, Tailwind, and code Playground

by LW

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <p>Code explanation: <a href="http://www.impressivewebs.com/textarea-auto-resize/">Textarea Auto Resize</a></p>

  <textarea id="comments" placeholder="Type many lines of texts in here and you will see magic stuff" class="common"></textarea>
</body>
</html>

CSS

body {
  margin: 20px;
  font-family: Arial, sans-serif;
}

p {
  margin-bottom: 14px;
}

textarea {
  color: #444;
  padding: 10px;
}

.txtstuff {
  resize: none; /* remove this if you want the user to be able to resize it in modern browsers */
  overflow: hidden;
}

.hiddendiv {
  position: absolute;
  left: -9999px;
  visibility: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
}

/* the styles for 'commmon' are applied to both the textarea and the hidden clone */
/* these must be the same for both */
.common {
  width: 100%;
  min-height: 50px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  overflow: hidden;
}

JavaScript

let txt = document.getElementById('comments'),
    hiddenDiv = document.createElement('div'),
    content = null;

txt.classList.add('txtstuff');
hiddenDiv.classList.add('hiddendiv', 'common');

document.body.appendChild(hiddenDiv);

txt.addEventListener('keyup', function () {

  content = this.value;
  hiddenDiv.innerHTML = content + '\n\n';
  this.style.height = hiddenDiv.getBoundingClientRect().height + 'px';

}, false);