How to align button to textarea corner and keep it in same relative position while expand contract

Question

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 http://jsfiddle.net/leopardy/2uwDT/1/ 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.

html

<div class="descriptionarea">
    <span class="namefortxtarea">Description</span>
    <textarea ></textarea>
    <span class="buttonfortxtarea"><button class= "btn btn-mini description_edit">Edit</button><button class= "btn btn-mini description_submit">Submit</button></span>
</div>

css

@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;
}

Answer 1

Try removing the container's strict width, you can set a min-width instead and if you make it display: inline-block or float: left you can make sure it doesn't span the entire width of its parent.

http://jsfiddle.net/2uwDT/2/

.descriptionarea {
    min-width: 490px;
    position: relative;
    display: inline-block;
}