Autogrow textarea

css-tricks.com
html
<div class="auto-grow">
<textarea />
</div>
css
.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;
}
js
const elms = document.querySelectorAll(".auto-grow");
elms.forEach((el) => {
const textarea = el.querySelector("textarea");
textarea.addEventListener("input", () => {
el.dataset.replicatedValue = textarea.value;
});
});