Align Title Horizontally Using Material-Ui and CSS - css

Question

I need to align the title Hello John Joseph Jones horizontally on the top BUT inside the black box.
The problem that it consumes the space vertically.
I don't if my code is good. Feel free to revise if there is a better way to do this.
Codesandbox is here CLICK 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>

Answer 1

I have edited your Code:
Inserted the new h1 tag, styled it, and changed the Grid direction from column to row.
import React from "react";
import { makeStyles } from "#material-ui/styles";
import { Box } from "#material-ui/core";
import Grid from "#material-ui/core/Grid";
import QRCode from "react-qr-code";
import { red } from "#material-ui/core/colors";
const useStyles = makeStyles(() => ({
button: {
color: "white"
},
hideButton: {
visibility: "hidden"
},
imageSection: {
display: "flex",
flexDirection: "column",
justifyContent: "center",
height: "100%"
},
img: {
height: "4cm",
width: "4cm",
},
h1: { // new
fontSize: "0.70rem",
width: "100%",
textAlign: "center",
margin: "0.1rem"
},
precinctNo: {
display: "flex",
justifyContent: "center",
margin: "0",
fontSize: "0.70rem",
fontWeight: "bold",
textTransform: "uppercase",
color: "#000"
},
controlNo: {
display: "flex",
justifyContent: "flex-start",
margin: "0",
fontSize: "0.70rem",
fontWeight: "bold",
textTransform: "uppercase",
color: "#000"
},
boxBorder: {
border: "3px solid black"
},
container: {
width: "8.5cm",
height: "5.5cm",
borderRadius: "3px",
border: "3px solid #000000",
color: "#00000"
},
pictureSection: {
display: "flex",
flexBasis: "100%"
},
nameAddressSection: {
display: "flex",
flexDirection: "column",
textAlign: "center",
flexBasis: "100%",
justifyContent: "space-between"
},
alignItems: {
alignSelf: "center",
textAlign: "center"
},
fontText: {
color: "#000000",
fontSize: "0.70rem",
fontWeight: "bold",
textTransform: "uppercase"
}
}));
const SampleCard = () => {
const classes = useStyles();
return (
<Box m={3}>
<Grid
container
direction="row" // new
className={classes.container}
spacing={2}
>
<h1 className={classes.h1}>Hello John Joseph Jones</h1> // new
<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>
);
};
export default SampleCard;
Watch out for the comments in your return statement. (I don't know if they will break your application)

Answer 2

You can do that by changing the structure a little
Add a root class to hold the main box
root: {
width: "8.5cm",
height: "5.5cm",
border: "3px solid #000000",
borderRadius: "3px",
boxSizing: "border-box"
},
Remove the border from the container class
container: {
color: "#00000",
height: "100%"
},
Apply it to the parent element
<Box className={classes.root} m={3}>
Add the centered text
<Box mb={1} className={classes.fontText} align="center">
Hello John Joseph Jones
</Box>
Take a look at https://codesandbox.io/s/material-ui-forked-dvoun?file=/SampleCard.js:197-252
In the example above I add some padding to the parent element, as now it holds the border, there may be other ways of doing that to keep the style
To keep the fixed size you will need to play around with the elements