Problem description

Exactly the same as #2601, which has either regressed or was never fixed. When TextFields and SelectFields are displayed inline, they are vertically misaligned.

Versions

• Material-UI: 0.16.1
• React: 15.3.2
• Browser: Chrome 56.0.2924.87

The workaround posted in #2601, setting vertical-align to bottom does work so long as the two elements are not positioned in a flex container.

In the event that they must be placed in a flex container, I've found that putting the SelectField in its own div and styling that div this way also works:

<div className='test'>
    <SelectField>{...}</SelectField>
</div>
<TextField/>

.test {
    display: flex;
    flex-direction: column-reverse;
}

Result:

(To clarify, this will not work unless both elements are in a flex container)

Hopefully this can be of use to somebody who has run into the same problem. If someone who knows a lot more than I do about this project can create a fix for this persistent little bug, that would be pretty awesome.