title: flexible height of <textarea> as a new line breaks
body: <p>I haven't seen this done before but I'm hoping it can be done. I'm trying to have an automatic height of a textarea as text is written inside of it. As seen here...</p>
  
  <p><a href="http://i.stack.imgur.com/oxRfj.jpg" rel="noreferrer">http://i.stack.imgur.com/oxRfj.jpg</a></p>
  
  <p><a href="http://i.stack.imgur.com/XVzYT.jpg" rel="noreferrer">http://i.stack.imgur.com/XVzYT.jpg</a></p>
  
  <p>Hopefully these images explain what I mean. the second image is also showing its theoretical max height.</p>
  
  <p><a href="https://jsfiddle.net/nupk26Ly/" rel="noreferrer">https://jsfiddle.net/nupk26Ly/</a></p>
  
  <pre><code>.text-f {
  border: none;
  border-bottom: #183A4C solid 1px;
  color: #183A4C;
  font: 1rem/2.4rem Georgia, serif;
  margin-top: 40px;
  resize: none;
  height: 40px;
  width: 100%;
  }
  </code></pre>