Как сделать чтобы ширина правой колонки вычислялась по содержимому и всё прижималось вправо?

Question

[BLOGG]

Есть такой код:

https://codepen.io/BLOGGG/pen/EdxXNW

Слева от текста предполагаются иконки (картинки просто не подгружаются)

Как видите, текст в каждой чётной иконке не прижимается к правому краю.
Если поставить flex-grow: 1, то чётные иконки будут смещены и выровнены по-разному.

Можно ли сделать это не меняя вёрстку, и не используя колонки?
В текущей вёрстке колонок нет, иконки идут друг за другом.

Answer 1

[profesor08]

Зада контейнеру display: flex, а блоку, который хочешь двинуть задай отступ margin как auto с той стороны, где ты хочешь чтоб было пространство.

.content {
  display: flex;
}

.services-page .content ul.two-flex-columns {
  margin-left: auto;
}

Comments

[BLOGG]

Вы чуть неправильно поняли задачу. Нужно чтобы те надписи, что справа, прижались к правому краю полностью. При этом все эти надписи, которые находятся справа, должны начинаться в одном и том же месте. Т.е. их позиционирование слева не должно быть разным.

[profesor08]

Ну в чем проблема? Помести их в один контейнер.

[BLOGG]

profesor08, Ну выходит тут только колонками решается проблема, порядок текущий не сохранить. Ладно пофиг, пусть будет так.