Как выстроить правильно?

Question

[olya_097]

Как выстроить правильно?
чтобы было как на скрине ниже
+ чтобы на картинку ниже не налазило
https://jsfiddle.net/kcurba9v/

Comments

[Rustam Bainazarov]

Две строчки. Одна с пунктами, вторая — с картинкой.

Answer 1

[Brad9aga]

это лишь примитив

Comments

[olya_097]

Brad9aga, спасибо
а что поправить чтобы текст был на одном уровне?

[Brad9aga]

olya_097,

Answer 2

[Lord_Dantes]

Сверху все верстка, пункты можно списком или дивами. Стрелку псевдо-элементом. Дорогу картинкой можно.

Comments

[olya_097]

slave, так и сделала
но все-равно налазит

[Lord_Dantes]

olya_097, что налазит?

[alex-1917]

slave, или кто...)))

[olya_097]

slave, скажем так - не на одной линии

https://jsfiddle.net/Brad9aga/nLo4dwb9/30/?utm_sou...

[Lord_Dantes]

olya_097, есть родитель который центрирует обертку для этих 3-х штук. Обертка уже будет по центру и ей нужно задать align-items: flex-start; и флексы. И ваши элементы выровняются

[olya_097]

slave, там где я написала 1 - то все ок

а вот там где 2 -нет

тоесть вот эти псевдо не на одному уровне
https://jsfiddle.net/ugmez56v/

[Lord_Dantes]

olya_097, выровняйте стрелку топ: 0

[olya_097]

slave, так теперь текст улетел

[Lord_Dantes]

olya_097, да не текст улетел а ваша логика

[olya_097]

slave, подскажите , пожалуйста, как подправить?
Вы ж сами написали выровняйте стрелку топ: 0

[Lord_Dantes]

olya_097, ну так вы топ 0 задали относительно родителя, нужно смотреть верстку выгрузите на кодпен.

[olya_097]

slave, https://codepen.io/Olya097/pen/WNeyJvp