Static text element between two md-input-containers
<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>