Stretching a HTML Input Box alongside additional input?

I'm using jQuery on this site, which has form inputs. I'd like one particular field to get longer (width) as the user enters data and space runs out.

How can I calculate when I ACTUALLY need to make the input ( type="text" ) longer? What works for one browser may not work for all browsers.

Is this something that can't be calculated, so everybody does it based on trial and error within each browser? Will I need to resort to this and tweak stretch values with a .keyup() that checks the value?.. EG..

$(".stretchInput").keyup( function(event) {

   var someValueAdjustedByTrialAndError = 30;

   var stretchPastLength = someValueAdjustedByTrialAndError;

   var stretchBy = 5;

   var baseWidth = 100;

   if ($(this).val().length > stretchPastLength ) {

      $(this).css('width',(baseWidth + ($(this).val().length - stretchPastLength ) * stretchBy ) + 'px');

   } else {

      $(this).css('width','');

   }

});