It feels clean to me, but I wonder if using a is safer for screen readers? Or maybe the visibility: hidden is enough for that? Anyway, that’s not the weird part. I’m not sure if that’s the best possible approach or not. In my demo, I’m using ::after for the replicated text. We also need white-space: pre-wrap on the replicated text because that is how textareas behave. If it’s not exactly the same, everything won’t grow together exactly right. It’s an identical copy, just visually hidden with visibility: hidden. Same font, same padding, same margin, same border… everything. You need to make sure the replicated element is exactly the same This means that the minimum height of the will become the “base” height, but if the replicated text element happens to grow taller, everything will grow taller with it. Whichever of the children is tallest is will push the parent to that height, and the other child will follow. Now all three elements are tied to each other. You hide the replica visually (might as well leave the one that’s technically-functional visible).

Instead, you exactly replicate the look, content, and position of the element in another element.

So you’ve got a, which cannot auto expand height. CodePen Embed Fallback The trick is that you exactly replicate the content of the in an element that can auto expand height, and match its sizing.

Autosize js