title: Material UI: Place a space between two Typography components
body: <p>How do I add a space in between two Typography components and align them at the bottom?</p>
  
  <p>Here's my code:</p>
  
  <pre><code>  &lt;div style={{ display: "flex" }}&gt;
      &lt;Typography variant="title" color="inherit" noWrap&gt;
        Project:
      &lt;/Typography&gt;
      &lt;Typography variant="body 2" color="inherit" noWrap&gt;
        Example
      &lt;/Typography&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>It looks like this:
  <a href="https://i.stack.imgur.com/x42GM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/x42GM.png" alt="enter image description here"></a></p>
  
  <p>Working example:
  <a href="https://codesandbox.io/s/llqry78p29" rel="noreferrer">https://codesandbox.io/s/llqry78p29</a></p>