This textarea should expand vertically as you type.
<p>
  <textarea data-expandable></textarea>
</p>

Click on this one to expand when you click on it/focus (tab to it from the previous textarea.)
Ideally it should expand as soon as the element is created in the document.
<p>
  <textarea data-expandable>
Similique asperiores quia laboriosam optio dolor dolore fugit sunt. Et quisquam consequatur sed explicabo. Excepturi sed labore quam est nam est molestias et. Molestiae dolores alias quis. Enim enim fugit est. Explicabo repudiandae ut omnis deserunt ducimus neque aut laboriosam.

In sint amet soluta nisi debitis. Nobis cumque error a doloribus maxime incidunt dolorem aspernatur. Occaecati libero nesciunt suscipit ipsa.

Quam excepturi nostrum omnis harum autem architecto. Soluta voluptatem voluptatem rerum consequuntur unde quos praesentium. Tenetur natus dolor id enim. Porro et quis similique. Autem perferendis accusantium officia molestias et quisquam. Quia officia et qui quasi laudantium esse.

Laudantium ipsam enim in rerum et molestias rerum. Voluptatibus consequuntur in id voluptatibus minus qui fugit. Qui perferendis et sequi velit quidem qui. Quod omnis quae sed voluptatem eos repellendus provident debitis.

Dolores sint et blanditiis ut. Est iusto voluptates dicta laborum vel est esse. Et vitae aliquam aut placeat sed.

    
  </textarea>
</p>
textarea {
  min-width:25vw;
}
$('body').on('keydown input', 'textarea[data-expandable]', function() {
  //Auto-expanding textarea
  this.style.removeProperty('height');
  this.style.height = (this.scrollHeight+2) + 'px';
}).on('mousedown focus', 'textarea[data-expandable]', function() {
  //Do this on focus, to allow textarea to animate to height...
  this.style.removeProperty('height');
  this.style.height = (this.scrollHeight+2) + 'px';
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js