<h1>Auto-Growing <code>&lt;textarea></code></h1>
<h2>DO NOT USE !! Just for fun as only works in Chrome - probably a bug anyway</h2>
<form action="#test">
  <label for="textarea1">Text:</label>
  <div class="textarea-wrap">
    <textarea class="text1" name="textarea1" id="textarea1"></textarea>
  </div>
  <p>Testing Following content</p>
</form>

/*
DO NOT USE!!!

Just a quirky demo

Only working in Chrome
*/
.textarea-wrap {
  background: #eee;
  display: table;
  border: 1px solid #000;
  padding: 5px;
}
.textarea-wrap:focus-within {
  outline: 1px solid blue;
  outline-offset: 1px;
}
.text1 {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  display: inline-table;
  height: auto;
  white-space: normal;
  overflow: auto;
  resize: none;
  outline: none;
}
label {
  display: block;
}