title: Static text element between two md-input-containers
body: <p>I am using Angular Material and have a couple of select inputs on a form that I would like to separate with a piece of static text.</p>
  
  <p>Both the selects are in md-input-containers and so the text that sits between the two needs to have the same padding around as so I have had to use a further input container to hold the static text like so:</p>
  
  <pre><code>&lt;div layout="row" flex layout-padding&gt;
      &lt;md-input-container flex&gt;
          &lt;label translate&gt;Select 1&lt;/label&gt;
          &lt;md-select ng-model="option1" flex&gt;
              &lt;md-option ng-repeat="option in options"&gt;
              &lt;/md-option&gt;
          &lt;/md-select&gt;
      &lt;/md-input-container&gt;
      &lt;md-input-container&gt;
          &lt;label&gt;&lt;/label&gt;
          &lt;input type="text" value="label" readonly&gt;
      &lt;/md-input-container&gt;
      &lt;md-input-container flex&gt;
          &lt;label translate&gt;Select 2&lt;/label&gt;
          &lt;md-select ng-model="option2" flex&gt;
              &lt;md-option ng-repeat="option in options"&gt;
              &lt;/md-option&gt;
          &lt;/md-select&gt;
      &lt;/md-input-container&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://codepen.io/parky128/pen/rLWJNK" rel="nofollow">Working fiddle</a></p>
  
  <p>It feels a bit hacky, and I wondered if anyone had any better suggestions.</p>
  
  <p>I dont want the text to have any border bottom on, I know I could just roll my own css, but I wondered if there was a way out of the box using the AM framework?</p>