Material UI make 2 elements the same height - css

Question

I have the following code:
<div className="center">
<TextField
variant="outlined"
className="manualUserFollowTxt"
required
id="manualUserFollowTxt"
label="Username"
name="username"
autoComplete="username"
autoFocus
/>
<Button variant="contained" color="primary" className="manualUserFollowButton"
onClick={(e) => this.followButtonClick(e, document.getElementById("manualUserFollowTxt").value)}
>
Follow
</Button>
</div>
Which basically results in:
what I have
What I want is to have the TextField and the Button be the same height with a little space in between and sitting on one line, preferably in the middle. Something like:
what I want
How can I achieve this??

Answer 1

In order to make the TextField and Button the same height and aligned, you can CSS Flexbox on the parent div.
Set the display to flex, and flex-direction to row.
In order to apply spacing between the TextField and Button, you can apply margin-right to the TextField (here I used material-ui styling):
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import TextField from '#material-ui/core/TextField';
import Button from '#material-ui/core/Button';
const useStyles = makeStyles(theme => ({
textField: {
marginRight: theme.spacing(2),
},
}));
export default function TextFieldDemo() {
const classes = useStyles();
return (
<div style={{display: 'flex', flexDirection: 'row'}}>
<TextField
variant="outlined"
className={classes.textField}
required
id="manualUserFollowTxt"
label="Username"
name="username"
autoComplete="username"
autoFocus
/>
<Button variant="contained" color="primary" className="manualUserFollowButton"
onClick={(e) => this.followButtonClick(e, document.getElementById("manualUserFollowTxt").value)}
>
Follow
</Button>
</div>
);
}