Типография дает разрывы строк вместо выравнивания в один ряд

Question

Я использую Material ui Typography для отображения содержимого в Chip, но мое содержимое отображается в двух разных строках вместо одной, мне не нужен разрыв строки. Ниже мой код

  <Typography className={classes.title} style={{ display: 'inline' }} color="textSecondary" gutterBottom>
      {chipName}
      <img src={chipIIcon} style={{ marginLeft: '90%' }} alt="chipIIcon" />
  </Typography>

Что не так в моем коде и как я могу показать chipName и img в одной строке?

Answer 1

Вы можете заменить marginLeft: 90% на float: right:

<Typography color="textSecondary" gutterBottom>
  {chipName}
  <img src={chipIIcon} style={{ float: 'right' }} alt="chipIIcon" />
</Typography>

Или вы можете изменить отображение Typography на flex и установить justifyContent на space-between (в идеалевы будете использовать классы вместо встроенного стиля):

<Typography style={{ display: "flex", justifyContent: "space-between"}} color="textSecondary" gutterBottom>
  chipName
  <img src={"chipIIcon"} alt="chipIIcon" />
</Typography>

Демо