Material UI: Place a space between two Typography components

Question

How do I add a space in between two Typography components and align them at the bottom?

Here's my code:

  <div style={{ display: "flex" }}>
    <Typography variant="title" color="inherit" noWrap>
      Project:
    </Typography>
    <Typography variant="body 2" color="inherit" noWrap>
      Example
    </Typography>
  </div>

It looks like this:

Working example: https://codesandbox.io/s/llqry78p29

Answer 1

Just add a typography element with just white space:

<div style={{ display: "flex" }}>
  <Typography variant="title" color="inherit" noWrap>
    Project:
  </Typography>
  <Typography variant="title" color="inherit" noWrap>
    &nbsp;
  </Typography>
  <Typography variant="body2" color="inherit" noWrap>
    Example
  </Typography>
</div>

Answer 2

The question is a bit old but I was facing the same issue so I'll post my fix. I used the flex property:

align-items: baseline;

So the code would be like this:

<div style={{ display: "flex", alignItems: "baseline" }}>
   ...
</div>

And the result would look like this:

The solution mentioned in the comments align-items: flex-end was not giving me the expected outcome, the text Example is a bit too far away down:

Example: https://codesandbox.io/s/material-demo-2od20