How can I make an input field and a button fill the entire row in a Bootstrap form?

Question

I'm trying to make the Post button stick to the right and the text field for the tags fill the entire left part of the row in the following Bootstrap 3 form:

Here's the markup for the entire form:

<form>
  <div class="form-group">
    <textarea class="form-control" id="entry" placeholder="Write something in Markdown..." rows="3"></textarea>
  </div>
  <div class="row">
    <div class="col-sm-9">
      <input class="form-control input-sm" id="tags" placeholder="tag1, tag2, tag3...">
    </div>
    <div class="col-sm-3">
      <button class="btn btn-primary btn-sm" type="submit">Post</button>
    </div>
  </div>
</form>

I admittedly don't understand the Bootstrap grid system (or CSS in general) well enough to make this work - can you help me?

Answer 1

You can do this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />


<div class="input-group">
  <input type="text" class="form-control" placeholder="Search for...">
  <span class="input-group-btn">
    <button class="btn btn-primary" type="button">Post</button>
  </span>
</div>

You can find more examples here: http://getbootstrap.com/components/#input-groups-buttons