Выравнивание текста в списке с иконками

Question

Как выровнять текст по вертикальной линии не меняя ширины разношироких иконок?

Есть список со структурой:

<ul>
  ...
  <li>
    <img class="icon" src="icon.svg" />
    <p class="text"> Text </p>
  </li>
  ...
</ul>

Иконки - svg разных размеров (ширина от 40px до 45px). Иконке задан margin-right и мы получаем проблему:

Мой вариант 1 - иконки не соответствуют дизайну

Если мы ставим фиксированную ширину иконки то текст получается по одной вертикальной линии (желаемый результат), но в таком случае иконки по размеру не соответствуют дизайну.

Мой вариант 2 - текст не располагается по одной линии

Если не трогать ширину иконки, то они выглядят как и задумано дизайнером, но текст идёт не по одной вертикальной линии (это недопустимо).

Подскажите пожалуйста как красиво написать стили, чтобы иконки были разной ширины, а текст шёл по одной линии.

Answer 1

Красиво тут не получится, ибо для красоты нужно иконки всё же "причесать" (думаю, что и по высоте иконки различаются).

ul {
  margin: 0; padding: 0;
  width: min-content;
  list-style-type: none;
}

li {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}

.icon {
  height: 30px;
  box-shadow: inset 0 0 16px red;
}

.text {
  flex: 1;
  /* Вычитаем ширину самой большой иконки */
  max-width: calc(100% - 50px);
  box-sizing: border-box;
  padding: 0 30px 0 10px;
  white-space: nowrap;
  box-shadow: inset 0 0 8px blue;
}

<ul>
  <li>
    <img width="40px" class="icon" src="icon.svg" alt="40px" />
    <p class="text">Some text</p>
  </li>
  <li>
    <img width="30px" class="icon" src="icon.svg" alt="30px" />
    <p class="text" contenteditable>Этот текст можно изменить</p>
  </li>
  <li>
    <img width="50px" class="icon" src="icon.svg" alt="50px" />
    <p class="text">Hello world</p>
  </li>
</ul>

БЛОГ НА HUSL

Выравнивание текста в списке с иконками

Ответы (1 шт):