title: How to align button to textarea corner and keep it in same relative position while expand contract
body: <p>I have a textarea and I want a couple of buttons to always be below the textarea and aligned with the text area's bottom right corner. The closest I got is shown in this fiddle <a href="http://jsfiddle.net/leopardy/2uwDT/1/" rel="nofollow">http://jsfiddle.net/leopardy/2uwDT/1/</a>
  but its not even aligned all the way to the right in line with the textarea and worse when I resize the textarea via the resize grabber triangle on the bottom right corner, and I move the right line of the text area either to the right or left) the buttons become misaligned even more(even further away from right side of the textarea). 
  One note is that the textarea has to be able to be resized, I can't have it at a set size.</p>
  
  <p>html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="descriptionarea"&gt;
      &lt;span class="namefortxtarea"&gt;Description&lt;/span&gt;
      &lt;textarea &gt;&lt;/textarea&gt;
      &lt;span class="buttonfortxtarea"&gt;&lt;button class= "btn btn-mini description_edit"&gt;Edit&lt;/button&gt;&lt;button class= "btn btn-mini description_submit"&gt;Submit&lt;/button&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre class="lang-css prettyprint-override"><code>@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
  
  .descriptionarea {
     width: 490px;
     position: relative;
  }
  
  .descriptionarea textarea{
      width: 490px;
      height: 20px;
  }
  
  .descriptionarea span.namefortxtarea{
      display: block;
      text-align: left;
      font-size:12px;
  }
  
  .descriptionarea span.buttonfortxtarea{
      display: block;
      text-align: right;
  }
  </code></pre>