md-input-container和标签未对齐

Question

I am trying to create a filter for price, and I am stuck on aligning these elements correctly.

With this code:

<div formGroupName="price.baseMSRP" fxLayout="row">
    <span>Price</span>

    <md-input-container>
        <input mdInput type="number" min="{{data.price.min}}" max="{{data.price.max}}" step="1000"
               placeholder="Min:" value="{{data.price.min}}" formControlName="$gte" (change)="onUpdate(form.value)" />
    </md-input-container>
    <span>to</span>
    <md-input-container>
        <input mdInput type="number" min="{{data.price.min}}" max="{{data.price.max}}" step="1000"
               placeholder="Max:" value="{{data.price.max}}" formControlName="$lte" (change)="onUpdate(form.value)" />
    </md-input-container>
</div>

Yields this result:

How can I edit the HTML/CSS in order to make this look a little more aligned and space them out a little?

Ideally, I would like for "Price" and "to" to line up with "11990" and "247900." How can this be done (with Flexbox)?

Thanks

Answer 1

For those who are wondering to align text with md-input container

create a css property:

.range-to {
    padding-top: 13px;
    padding-left: 20px;
}

Answer 2

using

<md-content>
  <label>test</label>
  <md-input-container>
     <input  type="number"/>
  </md-input-container>
</md-content>