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

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?

Matti Greff Matti Greff · Accepted Answer · 2020-04-01T21:50:40

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.

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

2 Answers