How can I make a horizontal form 100% width when including a button?

I'd like this inline form to be width:100%.  The search button should be a constant width, but the search box should be dynamic.  Any ideas how to do this?
<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only">Search</label>
    <input type="search" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

Open in new window

TrevorTomatoAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
The easiest way is to use a table element.  Still haven't seen anything to beat this approach to fixed width elements

http://jsbin.com/uHodibO/1/edit?html,css,output

    <table class="form-table">
      <tr>
        <td class="row1"><label class="sr-only">Search</label></td>
        <td class="row2"><input type="search" class="form-control" placeholder="Search"></td>
      </tr>
    </table>

Open in new window


css:
.form-table {
  width: 100%;
}
.form-control {
  width: 100%;
}
.row1 {
  width: 5%;
}

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GaryCommented:
You mean you want the input box to be 100% width?

Just add

.form-inline input {
    width:100%
}

http://jsfiddle.net/DUE5R/1/
RobOwner (Aidellio)Commented:
You can emulate a table using css only.  Taking your markup:  http://jsbin.com/icEjeKOY/1/edit?html,css,output

.form-inline {
  width: 100%;  
  display: table;
}
.form-group {
  display: table-row;
}
.cell {
  display: table-cell;
}
.form-control {
  width: 100%;
}
.sr-only {
  width: 15%;
}

Open in new window

GaryCommented:
I'm guessing here that you are probably using Bootstrap which has a class for 100% widths - just add a class of .form-control to the input (if it is the input you want to be 100%) else Rob's solution maybe the way to go.
TrevorTomatoAuthor Commented:
Worked great!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.