Material UI: Avoid line break between Typography components

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.

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/