Центрировать значок рядом с обернутым текстом, чтобы оба были центрированы как группа внутри контейнера? [закрыто] ⇐ CSS

[Anonymous]

Мне трудно понять, как центрировать значок рядом с обернутым текстом с помощью text-wrap: Balance, чтобы оба они были центрированы как группа внутри контейнера?
Кажется, flexbox не может учитывать обтекание текста, и в итоге значок сдвинут в крайнее левое положение, а текст центрирован в оставшемся пространстве.
Я пытаюсь использовать flexbox, поскольку порядок элементов должен быть изменен. изменены на разных точках останова.
Как решить эту проблему?

Код: Выделить всё

.container {
max-width: 800px;
margin: 0 auto;
background: #f3f3f3;
padding: 30px;
display: flex;
justify-content: center;
}

.icon {
width: 100px;
height: 100px;
background: #ccc;
}

.col-text {
text-wrap: balance;
}

.row {
display: flex;
gap: 32px;
}

Код: Выделить всё

Culpa magna incididunt nostrud labore veniam amet velit. Sint consequat id quis non magna elit amet consectetur. Culpa magna incididunt nostrud labore veniam amet velit. Sint consequat id quis non magna elit amet consectetur.

Подробнее здесь: https://stackoverflow.com/questions/798 ... -within-co