MUI: Avoid line break between Typography components [duplicate]

Question

I would like to apply two different Typography tags to my text, but I don't want a line break in between.

This is what I have:

<Typography variant="title" color="inherit" noWrap>
  Project:
</Typography>
<Typography variant="subheading" color="inherit" noWrap>
  Example
</Typography>

This is what it looks like (with the line break):

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

How do I remove the line break?

Answer 1

Wrap those in a display:flex and it will show it in a row.

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

codesandbox of edited code.

Edit: You can use style={{marginLeft:10}} on Example to give spacing between the two. And if you want to align them vertically, give flexDirection:'column' to the style of Project.

Answer 2

Use the display prop on version 4.x

<Typography variant="h1" color="inherit" display="inline">
  Project:
</Typography>
<Typography variant="subtitle1" color="inherit" display="inline">
  Example
</Typography>

Use the inline prop on version < 4.x

<Typography variant="title" color="inherit" inline>
  Project:
</Typography>
<Typography variant="subheading" color="inherit" inline>
  Example
</Typography>

https://material-ui.com/api/typography/