How to align a Material UI Button and TextField on the same line, at same height?

Question

I'm trying to get a <Button> from the Material UI library to a) sit at same height as the <TextField> next to it; and b) have it be aligned with that same field.

Both the <Button> and the <TextField> are each inside their own <Grid> component (with a container wrapping them).

The container <Grid> has the prop alignItems="center", which produces this result:

It's here I'm running into difficult trying to get the height of the <Button> to match that of the input field. This must be a relatively common requirement - is there a simple way of achieving this?

Answer 1

Given that you have each of your element in a <Grid> component themselves, this should work:

https://codesandbox.io/s/material-ui-playground-forked-1yymw?file=/app.jsx