I'm trying to horizontally align the title Hello John Joseph Jones at the top inside the black box, but it's taking up too much vertical space. I'm not sure if my code is correct, so any suggestions for improvement are welcome.
https://i.sstatic.net/H6xWo.png
You can view the Codesandbox version HERE
<Box m={3}>
<Grid
container
direction="column"
className={classes.container}
spacing={2}
>
{/* <h1>Hello John Joseph Jones</h1> */}
<Grid item xs={6} className={classes.pictureSection}>
<div className={classes.imageSection}>
<img
src="https://picsum.photos/id/237/200/300"
className={classes.img}
alt="no pic"
/>{" }
<p className={classes.precinctNo}>PR 4838390</p>
<p className={classes.controlNo}>555555</p>
</div>
</Grid>
<Grid item xs={6} className={classes.nameAddressSection}>
<Box className={classes.fontText}>John Joseph Jones</Box>
<Box mt={1} className={classes.fontText}>
26 South Hawthorne Drive Tonawanda, NY 14150
</Box>
<Box mt={1}>
<QRCode size={80} value={"4234432"} />
</Box>
</Grid>
</Grid>
</Box>