angular-material input with an addon

Question

I'm trying to create an input with an extra text after it using angular-material. I want to achieve a similar effect as with bootstrap's .input-group-addon:

The closest I got is this:

<md-content layout-padding>
    <div layout="row" class="md-whiteframe-z1" style="width: 40%">
        <md-select placeholder="Type" ng-model="discount.type" flex="50" class="md-select-full-width">
            <md-option value="AMOUNT">Amount</md-option>
            <md-option value="PERCENT">Percent</md-option>
        </md-select>
        <div flex="50" layout="row" layout-align="center center">
            <md-input-container flex>
                <label>Value</label>
                <input ng-model="discount.value">
            </md-input-container>
            <span>%</span>
        </div>
    </div>
</md-content>

What gives following result:

As you can see the 2 fields are misaligned.

I also tried to use vertical-align on the <span>%</span> instead of layout-align="center center" but it seems to be ignored.

Answer 1

I figured out a solution using <md-icon>:

<md-content layout-padding>
    <div layout="row" class="md-whiteframe-z1" style="width: 40%">
        <md-select placeholder="Type" ng-model="discount.type" flex="50" class="md-select-full-width">
            <md-option value="AMOUNT">Amount</md-option>
            <md-option value="PERCENT">Percent</md-option>
        </md-select>
        <div flex="50" layout="row">
            <md-input-container flex>
                <label>Value</label>
                <input ng-model="discount.value">
            </md-input-container>
            <md-icon md-font-set="regular-font">%</md-icon>
        </div>
    </div>
</md-content>

The "regular-font" is some non-existing icon font library to make sure that the text inside <md-icon> won't be interpreted as an Material icon.

Now it's well aligned:

You can see the working solution here: http://codepen.io/LukaszWiktor/pen/oXoqYg

Answer 2

I just figured out a way to do this too for when you'd like the add-on to contain something more than a single character, using flexbox.

<md-input-container flex>
    <label>Length</label>
    <input type="number" ng-model="length" flex="80">
    <span flex>seconds</span>
</md-input-container>

The important parts are flex="80" on the input element, and flex on the span. This is telling the input to take up 80% of the space, and for the span to fill the remainder (at least I think so - I'm still learning flexbox).

The end result looks like this: