Как отцентрировать текст по центру, когда он короткий, но выровнять ли он по другому элементу слева, когда он длинный?

Question

У меня есть элемент 'header', который имеет значок слева и div с текстом справа.

Если текст короче, чем пространство справа от значка, то я хочу, чтобы он центрировался на экране , но когда он длинный, я хочу, чтобы он начинался справа от значка и заполнял остальную часть экрана многоточием.

| [icon]    centred           |

| [icon]Starts from the lef...|

Вот jsbin, чтобы проиллюстрировать проблему:

https://jsbin.com/jaxolic/edit?html, вывод

Я хочу, чтобы 'START' был справа от квадратного значка, но также «больше текста» для центрирования на экране, а не в области справа от значка (что произошло бы, если бы я сделал #icon not position: absolute и начал #text справа от него).

[РЕДАКТИРОВАТЬ] Я внес некоторые изменения, чтобы проиллюстрировать, где я хочу, чтобы «больше текста» было выровнено - два текста «больше текста» должны быть выровнены.

Answer 1

Не уверен, работает ли он в целях вашего проекта, но я заставил его работать, объявив фиксированную ширину для вашего #text div, чтобы он не пытался взять 100% ширины контейнера: https://jsbin.com/votixoj/edit?html, выход