как выровнять дочерние элементы в строке углового материала по вертикали

Html строится с помощью директивы layout (layout= «row») и содержит значок и 3 поля выбора. Мои поля выбора и значок не выровнены — как я могу выровнять их по горизонтали ?

Мой код

<div layout="row" layout-align="start center" class="filter"> 
        <div flex="15">
            <i class="material-icons md-24">filter_list</i>Filter
        </div>
        <div>
            <md-select ng-model="$ctrl.selectedtype1" placeholder="type1" class="md-no-underline">                    
                <md-option ng-repeat="type in $ctrl.type1List" ng-value="type">
                    {{type.value}} ({{type.id}})
                </md-option>
            </md-select>
        </div>
        <div>
            <md-select ng-model="$ctrl.selectedtype2" placeholder="type2" class="md-no-underline">                    
                <md-option ng-repeat="type in $ctrl.type2List" ng-value="type">
                    {{type.value}} ({{type.id}})
                </md-option>
            </md-select>
        </div>
        <div>
            <md-select ng-model="$ctrl.selectedtype3" placeholder="type3" class="md-no-underline">                    
                <md-option ng-repeat="type in $ctrl.type3List" ng-value="type">
                    {{type.value}} ({{type.id}})
                </md-option>
            </md-select>
        </div>
    </div>

…выглядеть так: