Stretch to fit inputs

Hey,

Do you know how gmail's textarea stretches to accomodate text?

I want my inputs to behave like that.

I tried using css:
fit: fill;

But that didn't work. Not even in Mozilla.

How do I do this?

In other words

<input type="text" name="name_first">
<input type="text" name="name_middle">
<input type="text" name="name_last">

I want the fields to line up like this.

+---------+ +---+ +-------+
| Garrett | | S | | Smith |
+---------+ +---+ +-------+

and if the user changes "name_middle" to "Sean", then the middle field should expand.

+---------+ +------+ +-------+
| Garrett | | Sean | | Smith |
+---------+ +------+ +-------+


I think I'll need to know the width of the input's value. I think that's actually possible in IE's Range.

input.select();
input.style.width=input.createTextRange().boundingWidth;

Well, I ended up using the span.

The range's boundingWidth is only going to work in IE, AFAIK. I did not test boundingWidth in Mozilla, but it is not documented and non-standard, so I assume it is not supported.

I'm going to try using a span, then setting the width of the input to the offsetWidth of the span.

It sounds like a pain, but I need the span element to have the same value as the input (as part of the functional spec).

What about (not perfect but acceptable):

<input type="text" size="1" onkeyup="this.size=this.value.length>0?this.value.length:1">

This works although in IE only.
<input type="text" size="3" style="overflow:visible" />