md-input-containerとラベルが整列していません

Question

価格のフィルタを作成しようとしていますが、これらの要素を正しく整列させることができません。このコードでは

：

<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> 

は、この結果が得られます。私は、これは少しより多くの整列に見えるようにするためとアウトスペースそれらをにHTML/CSSを編集することができますどのように

少し？

理想的には、 "Price"と "to"が "11990"と "247900"で整列することが理想です。これはどのように（Flexboxを使って）できますか？

おかげでCSSプロパティを作成するMD-入力コンテナ

でテキストを整列させる不思議に思っている人のために

Answer 1

：

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