Here is the code snippet I have:
<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>
This code gives a result as seen in this screenshot.
The desired layout should have the TextField and Button elements of the same height, with some space between them on a single line and centered. Something similar to: this desired outcome.
Would appreciate tips on how to achieve this look!