Material-UI for react, how layout Card component to align texts - reactjs

Question

So essentially I want to accomplish this block I designed in Adobe XD.
Adobe XD card design
Here is my code to implement the following:
const useStyles = makeStyles({
root: {
minWidth: 275,
maxWidth: 300
},
title: {
fontSize: 14
},
pos: {
marginBottom: 5
}
});
export default function SimpleCard() {
const classes = useStyles();
const bull = <span className={classes.bullet}>•</span>;
return (
<Card className={classes.root}>
<CardContent>
<Typography
className={classes.title}
color="textSecondary"
display="inline"
>
Physics
</Typography>
<Typography display="inline" align="right" style={{ marginLeft: 110 }}>
benevolent
</Typography>
<Typography variant="body2" component="p" align="left">
10/25/2001
</Typography>
</CardContent>
</Card>
);
}
Here is the codepen link:
https://codesandbox.io/embed/material-demo-bi3sm?fontsize=14&hidenavigation=1&theme=dark
The problem with this is that in the first line I have to manually set the distance between the two typography tags. So basically the distance between Physics and Benevolence is set manually. How can I automatically determine that distance? Also How can I get closer to my design?

Answer 1

Flex box can accomplish what you want easily, with the following class:
const useStyles = makeStyles({
header: {
display: "flex",
justifyContent: "space-between"
}
});
And if you use a div to wrap the typography:
<div className={classes.header}>
<Typography
className={classes.title}
color="textSecondary"
display="inline"
>
Physics
</Typography>
<Typography display="inline" align="right">
benevolent
</Typography>
</div>
...
Then it accomplishes what you want.

Answer 2

Have you tried using flexbox? You could put each line in a div and use justify-content with the different "between" options. This would put a set distance between each depending on which option you choose.
These might be the best two options:
justify-content: space-between;
justify-content: space-around;
Also using align-items: center might be good for centering them vertically.
If this doesn't work directly, you might wanna try adding !important to the new CSS code because I know Material-UI is fussy about styling.