Autogrow textarea

htmlCopy
<div class="auto-grow">
  <textarea />
</div>

cssCopy
.auto-grow {
  display: grid;
}
.auto-grow::after {
  content: attr(data-replicated-value) " ";
  white-space: pre-wrap;
  visibility: hidden;
}
.auto-grow > textarea {
  resize: none;
  overflow: hidden;
}
.auto-grow > textarea,
.auto-grow::after {
  border: 1px solid black;
  padding: 0.5rem;
  font: inherit;
  grid-area: 1 / 1 / 2 / 2;
}

jsCopy
const elms = document.querySelectorAll(".auto-grow");
elms.forEach((el) => {
  const textarea = el.querySelector("textarea");
  textarea.addEventListener("input", () => {
    el.dataset.replicatedValue = textarea.value;
  });
});