title: Textarea Auto height
body: <p>I want to make height of textarea equal to height of the text within it (And remove the scroll bar)</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;textarea id="note"&gt;SOME TEXT&lt;/textarea&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>textarea#note {
      width:100%;
      direction:rtl;
      display:block;
      max-width:100%;
      line-height:1.5;
      padding:15px 15px 30px;
      border-radius:3px;
      border:1px solid #F7E98D;
      font:13px Tahoma, cursive;
      transition:box-shadow 0.5s ease;
      box-shadow:0 4px 6px rgba(0,0,0,0.1);
      font-smoothing:subpixel-antialiased;
      background:linear-gradient(#F9EFAF, #F7E98D);
      background:-o-linear-gradient(#F9EFAF, #F7E98D);
      background:-ms-linear-gradient(#F9EFAF, #F7E98D);
      background:-moz-linear-gradient(#F9EFAF, #F7E98D);
      background:-webkit-linear-gradient(#F9EFAF, #F7E98D);
  }
  </code></pre>
  
  <p>JsFiddle: <a href="http://jsfiddle.net/Tw9Rj/">http://jsfiddle.net/Tw9Rj/</a></p>