Bootstrap, html5, jquery - widen input box to match data when focused, then return to original size when offfocus

You can actually do this without javascript. CSS alone can get the job done. Here's an example of CSS that would do it.

input
{
  width: 60px;
}

input:focus
{
  width: 120px;
}

Select allOpen in new window

and a working jsfiddle example: https://jsfiddle.net/3za2L9at/
If you wanna get fancy with animation: https://jsfiddle.net/3za2L9at/1/

input.comment
{
  width: 60px;
}

input:focus
{
  width: 100%;
}

I tried this, 100% only takes it out to the original width which seems to be based on the Heading.
It did not take it out to the width desired based on a variable length of text in the box.

Make sense, I hope?

input.proj
{
  width: 100%;
}

input.proj:focus
{
  width: 160px;
}

input.comment
{
  width: 100%;
}

input.comment:focus
{
  width: 260px;
}

This worked ok, I have to set the css by field;  it does
make the screen better.  Thanks for the solution, it helped a lot.
If there is a more dynamic way of handling that would
be very helpful also.

fabulous!