Material-components-web: mdc-textfield and mdc-select: Selection boxes and text fields go out of alignment when one filled in and one not

[mishushakov]

Bug report

Selection boxes and text fields go out of alignment when one filled in and one not

Steps to reproduce

<div class="mdc-text-field mdc-text-field--outlined">
    <input class="mdc-text-field__input">
    <div class="mdc-notched-outline">
        <div class="mdc-notched-outline__leading" />
        <div class="mdc-notched-outline__notch">
            <label class="mdc-floating-label">Name</label>
        </div>
        <div class="mdc-notched-outline__trailing" />
    </div>
</div>
<div class="mdc-select mdc-select--outlined">
    <i class="mdc-select__dropdown-icon" />
    <select class="mdc-select__native-control">
        <option value="16-25">16-25</option>
        <option value="26-35">26-35</option>
        <option value="36-45">36-45</option>
        <option value="46-55">46-55</option>
        <option value="56-65">56-65</option>
        <option value="65+">65+</option>
    </select>
    <div class="mdc-notched-outline">
        <div class="mdc-notched-outline__leading" />
        <div class="mdc-notched-outline__notch">
            <label class="mdc-floating-label">Age</label>
        </div>
        <div class="mdc-notched-outline__trailing" />
    </div>
</div>

Actual behavior

Expected behavior

Your Environment:

Packages:

Browser:

As well as Chrome 76

OS:

MacOS Mojave, 10.14.6 (18G87) & Windows 10

Thank you!!!

[Darhakexge]

This is caused because .mdc-select is an inline element, just add this in your css

.mdc-text-field, .mdc-select{
    vertical-align: middle;
}

[mishushakov]

Thanks @Darhakexge that did the job :)