Как расположить два дочерних элемента внутри контейнера, чтобы первый располагался по центру, а другой сбоку ⇐ CSS

[Anonymous]

У меня есть компонент кнопки (в React), который я хочу создать так, чтобы он располагал свое содержимое по центру, позволяя при этом указывать левые или правые значки. Содержимое должно располагаться по центру относительно родительского элемента и соблюдать каждый значок (необязательно), если он предусмотрен.
Проблема, с которой я столкнулся. Я столкнулся с тем, что не знаю, как лучше всего обеспечить перекрытие содержимого на следующей строке, когда оно достигает значка.
Ниже приведены несколько изображений чего я пытаюсь достичь




Я был пытаюсь использовать абсолютное позиционирование для обоих элементов с помощью transform: TranslateX, чтобы отрегулировать положение содержимого, но это не работает, если содержимое занимает все пространство или больше, чем ожидалось. Также пытался использовать flexbox, но он не позволяет выровнять отдельный элемент относительно родителя без учета значков. Установка отступа слева или справа (в зависимости от ширины значка), похоже, тоже не работает, поскольку смещает содержимое и нарушает центральное выравнивание.
Буду очень признателен за любой совет или указание. что я могу попытаться заставить его работать. Стараюсь избегать использования каких-либо «хакерских» решений на основе Javascript, в которых мне пришлось бы рассчитывать каждый контейнер

Подробнее здесь: https://stackoverflow.com/questions/791 ... -one-would