Trying to create a summary page using a MUI Dialog.
This is the dialog setup I have:
However, I am struggling to align the two sides at the top without any space above "Title 2". It appears that the Typographys are being added from the bottom up, starting with the last one in each div. Here is the JSX code I'm using:
<Dialog className={classes.dialog} open={open} fullWidth maxWidth="md">
<DialogTitle disableTypography className={classes.dialogTitle}>
<Typography align="center" variant="h5">
Summary
</Typography>
</DialogTitle>
<DialogContent dividers>
<div
className={
booleanVar === true ? classes.test1 : classes.test3
}
>
<Typography
align="center"
variant="h6"
>{`Title 1`}</Typography>
<Typography align="left" variant="h6"&
gt;{`Three`}</Typography>
<Typography align="left" variant="h6">{`Line`}</Typography>
<Typography align="left" variant="h6">{`Email:`}</Typography>
</div>
{booleanVar === true ? (
<div className={classes.test2}>
<Typography
align="center"
variant="h6"
>{`Title 2`}</Typography>
<Typography variant="h6">{`Two Line`}</Typography>
<Typography variant=
"h6">{`Example`}</Typography>
</div>
) : null}
</DialogContent>
</Dialog>
In addition to this, here is the CSS:
const useStyles = makeStyles((theme) => ({
dialog: {
borderRadius: "10px",
height: "auto",
justifyContent: "center",
margin: "auto",
width: "auto"
},
dialogTitle: {
padding: "6px 24px 16px 24px",
textAlign: "center"
},
test1: {
width: "49%",
margin: "auto",
textAlign: "left",
display: "inline-block",
paddingRight: "5px"
},
test2: {
width: "49%",
margin:&q-ot;auto",
textAlign: "center",
display: "inline-block",
borderLeft: "0.1em solid #e0e0e0",
paddingLeft: "5px"
},
test3: {
width: "100%",
margin: "auto",
textAlign: "center",
display: "inline-block"
}
}));
If you have a solution using CSS, it would be preferred, but I am open to any working solution!