title: Getting wrong height in bootstrap input-group
body: <p>I'm trying to get a beautiful form with input-group Bootstrap 3.3.7 class, but something is wrong.</p>
  
  <p>I think I have coded right input-group structure: the main div contains other three elements, an input-group-addon, an input-form and finally an input-group-button (with things inside).</p>
  
  <p>My problem is that the third element broke the height main div, resulting in an input-group-addon few pixels bigger than other input-group elements.</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;div class="col-xs-12 col-md-6"&gt;
      &lt;div class="input-group"&gt;
          &lt;span class="input-group-addon" id="sizing-addon2"&gt;Artículo&lt;/span&gt;
          &lt;ng2-completer [(ngModel)]="bus.articuloName" (selected)="artSelected($event)" [matchClass]="'match'" [placeholder]="'Nombre de Articulo'" [datasource]="artService" [textNoResults]="'No hay coincidencias'"&gt;&lt;/ng2-completer&gt;
          &lt;span class="input-group-btn"&gt;
              &lt;button class="btn btn-default" type="button" (click)="init('art')"&gt;
                  X
              &lt;/button&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My results:</p>
  
  <p><a href="https://i.stack.imgur.com/SxkT0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SxkT0.png" alt="enter image description here"></a></p>
  
  <p>Without input-group-button, the code works fine, but I really need this third element. I tried with glyphicons and btn-link instead btn-default... And I get difference wrong heights (a not exactly same result that the picture).</p>
  
  <p>By the way, I have 7 input-group in the form and 4 work properly and 3 have this problem, so there should not be a CSS inherit problem or something like that.</p>
  
  <p>Anybody knows where is the problem?</p>