Adapted version of https://codepen.io/chriscoyier/pen/XWKEVLy - see also https://chriscoyier.net/2023/09/29/css-solves-auto-expanding-textareas-probably-eventually/

.grow-wrap { /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height / display: grid; } .grow-wrap::after { / Note the weird space! Needed to preventy jumpy behavior */ content: attr(data-replicated-value) " ";

/* This is how textarea text behaves */ white-space: pre-wrap;

/* Hidden from view, clicks, and screen readers / visibility: hidden; } .grow-wrap > textarea { / You could leave this, but after a user resizes, then it ruins the auto sizing */ resize: none;

/* Firefox shows scrollbar on growth, you can hide like this. / overflow: hidden; } .grow-wrap > textarea, .grow-wrap::after { / Identical styling required!! */ border: 1px solid black; border-radius: 3px; padding: 0.35rem; font: inherit; line-height: 1.4; font-family: sans-serif;

/* Place on top of each other */ grid-area: 1 / 1 / 2 / 2; }

body { margin: 2rem; font: 1rem/1.4 system-ui, sans-serif; }

label { display: block; }