Пользовательский интерфейс материала: поместите пробел между двумя типографскими компонентами

Question

Как добавить пробел между двумя компонентами типографии и выровнять их по низу?

Вот мой код:

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

Это выглядит так:

Рабочий пример: https://codesandbox.io/s/llqry78p29