Bootstrap 3: how to control input width inside input-group?

Question

See http://jsfiddle.net/7T9r9/ as an example.

<li>
  <span class="row">
    <div class="col-md-3">
      <div class="input-group">
        <span class="input-group-addon">
          <input type="checkbox" class="checkbox"/>
        </span>
        <input type="text" class="form-control input-append" value="test">
        <span class="input-group-addon"></span>
      </div>
    </div>
    <div class="col-md-9">
      <div class="input-group">
        <input type="text" class="form-control"
               value="test">
        <span class="input-group-addon">
            <a href="#">
              <span class="glyphicon glyphicon-trash"></span>
            </a>
        </span>
      </div>
    </div>
  </span>
</li>

What I would like to achieve is to have the first input width fitting the text inside of it (a fixed width would do as well I guess). The second input should occupy the rest of the row and all the elements should be on the same line.

Is there a way to do this?

Answer 1

I'm guessing your fiddle is an example of the effect that you want, but you don't want to use different columns for it.

1. Dynamic width Text input based on value length is not possible (unless recently via some css goddess like Verou finding something). So assuming fixed width on that guy.
2. The other guy then can take advantage of the other fixed width to do a margin etc.

Something like this:

HTML

  <span class="row">
      <div class="test1 input-group">
        <span class="input-group-addon">
          <input type="checkbox" class="checkbox"/>
        </span>
        <input type="text" class="form-control input-append" value="test">
        <span class="input-group-addon"></span>
      </div>
      <div class="test2 input-group">
        <input type="text" class="form-control"
               value="test">
        <span class="input-group-addon">
            <a href="#">
              <span class="glyphicon glyphicon-trash"></span>
            </a>
        </span>
      </div>
  </span>

CSS

.row {
    position:relative;    
}
.test1 {
    width:200px
}
.test2 {
    position:absolute !important;
    top:20px;
    margin-left:200px;
}