JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<div class="container-fluid">
    <div class="span12">
        <div class="row-fluid">
            <form class="form-horizontal">
                <fieldset>
                  
                  <div class="control-group string required">
                    <label class="string required control-label" for="service_name">
                      <abbr title="required">*</abbr> Service name</label>
                      <div class="controls">
                        <input class="string required" id="service_name" name="service[name]" size="50" type="text">
                      </div>
                  </div>
                  
                  <div class="control-group integer required">
                    <label class="integer required control-label" for="service_duration">
                      <abbr title="required">*</abbr> Duration</label>
                      <div class="controls">
                        <div class="input-append">
                          <input class="numeric integer required span1" id="service_duration" name="service[duration]" type="text"><span class="add-on">minutes</span>
                        </div>
                      </div>
                  </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>

CSS

#service_name {width:200px;}

JavaScript

var normal_width = $("#service_name").width();
 var add_on = $(".add-on").width();
 var after_width = normal_width-add_on+3;
 $("#service_duration").width(after_width);