title: Angular-material: input-group and md-buttons on same line
body: <p>I'm having some trouble trying to include an input-group and a couple of buttons on the same line using <code>angular-material</code>.</p>
  
  <p>The following <code>HTML</code> structure produces the result you can see on the image below it, which is not what I want:</p>
  
  <pre><code>&lt;section layout-align="end center" layout-padding flex&gt;
      &lt;div layout="row" layout-align="start center" flex&gt;
          &lt;div class="input-group"&gt;
              &lt;input type="text" class="form-control" ng-model="monitor.query" placeholder="Search reports" aria-describedby="addon"&gt;
              &lt;span class="input-group-addon" id="addon"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;section layout-padding&gt;
          &lt;md-button class="md-primary" data-dismiss="modal" type="submit" id="submit" value="Submit" ng-click="monitor.newReport();"&gt;New Report&lt;/md-button&gt;
          &lt;md-button class="md-hollow disabled" data-dismiss="modal" type="button"&gt;Export&lt;/md-button&gt;
      &lt;/section&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/57tvE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/57tvE.png" alt="enter image description here"></a></p>
  
  <p>However, if I try to include all elements within the same <code>layout="row"</code>, the <code>input-group</code> ends up taking all the space and pushing the buttons out of the parent div:</p>
  
  <pre><code>&lt;section class="no-print" layout-align="end center" layout-padding flex&gt;
      &lt;div layout="row" layout-align="start center" flex&gt;
          &lt;div class="input-group"&gt;
              &lt;input type="text" class="form-control" ng-model="monitor.query" placeholder="Search reports" aria-describedby="addon"&gt;
              &lt;span class="input-group-addon" id="addon"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;md-button class="md-primary" data-dismiss="modal" type="submit" id="submit" value="Submit" ng-click="monitor.newReport();"&gt;New Report&lt;/md-button&gt;
          &lt;md-button class="md-hollow disabled" data-dismiss="modal" type="button"&gt;Export&lt;/md-button&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/WUHCf.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WUHCf.png" alt="enter image description here"></a></p>
  
  <p>Is there a right way of having an input group and a couple of buttons all on the same line using <code>angular-material</code> or do I have to create my own styles?</p>