Can't horizontally align Material-UI Autocomplete & Material-UI FormControl - reactjs

Question

Can't horizontally align Material-UI Autocomplete & Material-UI FormControl. I don't know what happened. When I import or write code for autocomplete then I got stuck into this. I need horizontally align the way FormControl and the Button is.
codesandbox: https://codesandbox.io/s/laughing-fast-fenv9?file=/src/Account.js:2364-2370
import React, { Component } from "react";
import {
Container, Grid, TextField,
FormControl, InputLabel, Select,
MenuItem, Button } from "#material-ui/core";
import { withStyles } from "#material-ui/core/styles";
import Autocomplete from "#material-ui/lab/Autocomplete";
import { createRef } from "react";
const styles = (theme) => ({
mR: {
marginRight: theme.spacing(3)
},
formControl: {
minWidth: 180,
marginRight: theme.spacing(3)
}
});
class Account extends Component {
constructor() {
super();
this.state = {
labelWidth: 0
};
this.handleChange = this.handleChange.bind(this);
this.inputLabel = createRef();
}
componentDidMount() {
this.setState({ labelWidth: this.inputLabel.current.offsetWidth });
}
handleChange = (event) => this.setState({ age: event.target.value });
render() {
const { classes } = this.props;
const top100Films = [
{ title: "The Shawshank Redemption", year: 1994 },
{ title: "The Godfather", year: 1972 }
];
const { age, labelWidth } = this.state;
return (
<React.Fragment>
<Container>
<Grid container spacing={2}>
<Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
<Autocomplete
options={top100Films}
getOptionLabel={(option) => option.title}
style={{ maxWidth: 180 }}
renderInput={(params) => (
<TextField
{...params}
label="Account Name"
variant="outlined"
/>
)}
color="primary"
size="small"
autoFocus
/>
<FormControl
className={classes.formControl}
variant="outlined"
size="small"
>
<InputLabel ref={this.inputLabel}>Age</InputLabel>
<Select value={age} labelWidth={labelWidth}>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
<Button variant="contained" color="primary">
Submit
</Button>
</Grid>
</Grid>
</Container>
</React.Fragment>
);
}
}
export default withStyles(styles, { withTheme: true })(Account);

Answer 1

You can wrap Autocomplete , Formcontrol , Button with :
<Grid item xs={4} sm={4} md={4} lg={4} xl={4}>
// Code
</Grid>
This will divide it into 3 columns. (12 grid layout).
Also please correct the lablewidth code. Select box will overflow in small screen case.

Answer 2

You should wrap the each of them using the <Grid item xs>...</Grid>
return (
<React.Fragment>
<Container>
<Grid container spacing={2}>
<Grid item xs>
<Autocomplete
options={top100Films}
getOptionLabel={(option) => option.title}
style={{ maxWidth: 180 }}
renderInput={(params) => (
<TextField
{...params}
label="Account Name"
variant="outlined"
/>
)}
color="primary"
size="small"
autoFocus
/>
</Grid>
<Grid item xs>
<FormControl
className={classes.formControl}
variant="outlined"
size="small"
>
<InputLabel ref={this.inputLabel}>Age</InputLabel>
<Select value={age} labelWidth={labelWidth}>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</Grid>
<Grid item xs>
<Button variant="contained" color="primary">
Submit
</Button>
</Grid>
</Grid>
</Container>
</React.Fragment>