Textarea crezca con el contenido solo CSS

Con el nuevo estándar de HTML5 podemos alcanzar lugares que antes era impensables o territorio de Javascript. A día de hoy, no hay nada nativo para conseguir que un textarea crezca según vas escribiendo; a no ser que hagas trampas. Es necesario recurrir a artes oscuras como usar el atributo contenteditable el cual nos permite convertir cualquier elemento HTML en una zona editable. Todo sin Javascript.

Demo

Prueba a escribir y dar algunos saltos de línea. ¡Crece!

HTML

Nos valemos de un div aunque también sería posible un span.

<div contenteditable class="fake-textarea"></div>

CSS

Primero hay que darle un aspecto más similar al textarea con algún borde y a continuación before para logar imitar el placeholder. Por último un min-height para evitar un error visual si se añaden y quitan muchos saltos de línea (gracias a Jorge Villegas).

.fake-textarea {
  border: 1px solid black;
  width: 30rem;
  padding: .5rem;
  min-height: 3rem;
}
.fake-textarea:empty::before {
  position: absolute;
  content: "Write here...";
}

SASS

Si eres de los que usar un preprocesador, puedes usar la siguiente versión.

.fake-textarea
  border: 1px solid black
  width: 30rem
  padding: .5rem
  min-height: 3rem
  &:empty::before
    position: absolute
    content: "Write here..."

Todo unido

<html>
    <head>
      <style>
      .fake-textarea {
        border: 1px solid black;
        width: 30rem;
        padding: .5rem;
        min-height: 3rem;
      }
      .fake-textarea:empty::before {
        position: absolute;
        content: "Escribe aquí...";
      }
      </style>
    </head>
    <body>
        <div contenteditable class="fake-textarea"></div>
    </body>
</html>

Bonus: Necesito enviar con

En ese caso necesitarás que esté presente un textarea real, pero oculto. En cada ocasión que se escriba en el falso campo, se rellenará en textarea auténtico, aunque no se vea. Hay que usar una pizca de Javascript.

<html>
    <head>
      <style>
      .fake-textarea {
        border: 1px solid black;
        width: 30rem;
        padding: .5rem;
        min-height: 3rem;
      }
      .fake-textarea:empty::before {
        position: absolute;
        content: "Escribe aquí...";
      }
      #description {
        display: none;
      }
      </style>
    </head>
    <body>
        <form>

            <!-- Falso y edita el usuario -->
            <div contenteditable class="fake-textarea" oninput="document.querySelector('#description').textContent = this.innerText"></div>
            <!-- Real y oculto -->
            <textarea id="description"></textarea>
            <!-- Botón para enviar el formulario -->
            <input type="submit" value="Enviar">

        </form>
    </body>
</html>