Stretch To Fit Inputs

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.