How to make textareas auto-resize using just CSS?

Question

I need to make a textarea increase in height as it fills with text. I previously had a JavaScript/JQuery solution for this

 function expandingTextBox(e) {
  $(e).css({'height':'80', 'overflow-y':'hidden'}).height(e.scrollHeight);
 }
 $('textarea').each(function(){
   expandingTextBox(80);
 }).on('input', function() {
    expandingTextBox(this);
 });

And this almost served the purpose. Briefly, I have a popup in my web application, and I want to be able to drag objects from elsewhere, and dump them in my popup, creating new textareas that resize to fit their contents. This function only resizes textareas as I type in them.

A colleague thinks I can do this with CSS alone -- no JavaScript or JQuery plugins? Every other solution I've found on the interwebs relies on at least some JQuery plugin (and I can't download new plugins onto my machine at work so easily). Is there a way with just CSS?

I've tried changing textareas to divs, and using the contenteditable attribute. This caused problems elsewhere (but it'd take a long time to explain why).

Thx -- Gaweyne

EDIT: If it is impossible with pure CSS, I'd accept solutions that use JavaScript or JQuery that I don't need to download additional plugins for.

Answer 1

1. Use event delegation to handle dynamically-added elements.

2. Move the CSS to a style sheet.

3. On input, set the height to 80, then set it to the scroll height.

Snippet

$('button').on('click', function() {
  $('<textarea/>').appendTo('body').focus();
});

$(document).on('input', 'textarea', function() {
  $(this).height(80).height(this.scrollHeight);
});

textarea {
  vertical-align: top;
  height: 80px;
  overflow-y: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add new textarea</button>
<hr>
<textarea></textarea>