title: angular-material input with an addon
body: <p>I'm trying to create an input with an extra text after it using <a href="https://material.angularjs.org/" rel="noreferrer">angular-material</a>. I want to achieve a similar effect as with <a href="http://getbootstrap.com/components/#input-groups" rel="noreferrer">bootstrap's .input-group-addon</a>:
  <img src="https://i.stack.imgur.com/FnIc2.png" alt="enter image description here"></p>
  
  <p>The closest I got is <a href="http://codepen.io/LukaszWiktor/pen/gpXXxW" rel="noreferrer">this</a>:</p>
  
  <pre><code>&lt;md-content layout-padding&gt;
      &lt;div layout="row" class="md-whiteframe-z1" style="width: 40%"&gt;
          &lt;md-select placeholder="Type" ng-model="discount.type" flex="50" class="md-select-full-width"&gt;
              &lt;md-option value="AMOUNT"&gt;Amount&lt;/md-option&gt;
              &lt;md-option value="PERCENT"&gt;Percent&lt;/md-option&gt;
          &lt;/md-select&gt;
          &lt;div flex="50" layout="row" layout-align="center center"&gt;
              &lt;md-input-container flex&gt;
                  &lt;label&gt;Value&lt;/label&gt;
                  &lt;input ng-model="discount.value"&gt;
              &lt;/md-input-container&gt;
              &lt;span&gt;%&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/md-content&gt;
  </code></pre>
  
  <p>What gives following result:
  <img src="https://i.stack.imgur.com/cblk4.png" alt="enter image description here"></p>
  
  <p>As you can see the 2 fields are misaligned. </p>
  
  <p>I also tried to use <code>vertical-align</code> on the <code>&lt;span&gt;%&lt;/span&gt;</code> instead of <code>layout-align="center center"</code> but it seems to be ignored.</p>