title: vertical-align text within a textarea
body: <p>I have </p>
  
  <pre><code>&lt;html&gt;
  &lt;textarea id='txt' style='height:500px; widht:400px'&gt;&lt;/textarea&gt;
  &lt;input type='text' id='input'/&gt;
  &lt;input type='button' id='clicMe' onkeypress='fillTxt()' /&gt;
  
  &lt;script&gt;
  function fillTxt(){
    if(event.keyCode == 13)
        document.getElementById('txt').value += document.getElementById('input').value + &lt;br/&gt;;
  }
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>what I want is that the when I click on the button the text gets inside the textarea and be vertically aligned bottom. Meaning the text I add will append to the bottom of the textarea </p>
  
  <p>Example: </p>
  
  <pre><code>.-----------------------------.
  |                             |
  |                             |
  |                             |
  |  this is some text          |
  '-----------------------------'
  </code></pre>
  
  <h2>EDIT:</h2>
  
  <p>I got it working now</p>
  
  <pre><code>&lt;div id="tBox" style=" 
      position:absolute;
      top:400px;
      left:220px;
      width:600px;
      height:334px;
      color:#666666;
      padding:5px;
      margin-bottom:25px;"&gt;
  
          &lt;div id="tHolder" style="
              width:500px; 
              height:300px; 
              background-color:transparent; 
              color:#008080; 
              font-weight:bold; 
              border-style:hidden; 
              left:5px; 
              background-color:transparent;
              position:relative;
              overflow:auto;"&gt;
  
              &lt;p id="txt" style='position:absolute; bottom:0; left:0;'&gt;&lt;/p&gt;
  
          &lt;/div&gt;
  
          &lt;input type="text" style="width:500px; position:absolute; bottom:15px; left:8px;" id="input" name="input" onkeydown="fillTxt()" /&gt;
  
  &lt;/div&gt;
  </code></pre>