title: Input and button in same line with Bootstrap
body: <p>I want to put an input field and a Button in the same line. I want to set fix size for the button, and and I want the form to fill the available space. I've tried to create my own solution, but unfortunately the button is lower than the input field. How can I fix this?</p>
  
  <p><a href="https://i.stack.imgur.com/JkjJc.png" rel="noreferrer"><img src="https://i.stack.imgur.com/JkjJc.png" alt="enter image description here"></a></p>
  
  <p>CSS:</p>
  
  <pre><code>.input-bar {
      display: table;
      width: 100%;
  }
  
  .input-bar-item {
      display: table-cell;
  }
  
  .input-bar-item &gt; button {
      margin-left: 5px;
  }
  
  .width100 {
    width: 100%;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;div class="input-bar"&gt;
      &lt;div class="input-bar-item width100"&gt;
        &lt;form&gt;
           &lt;div class="form-group"&gt;
              &lt;input class="form-control width100"&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="input-bar-item"&gt;
        &lt;button class="btn btn-info"&gt;MyButton&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://plnkr.co/edit/5clqg067q4DiMHRkoPEY?p=preview" rel="noreferrer">https://plnkr.co/edit/5clqg067q4DiMHRkoPEY?p=preview</a></p>