на этот вопрос сложно ответить не сверстав данную штуку за вас. Вариантов верстки может быть много - в зависимости от того что вам нужно, опыта и тараканов в голове
Я бы сверстал вот так: 1) Общий блок контейнер. 2) Блок со шкалой по центру. 3) Кружки (точки) - абсолютно позиционированные блоки внутри блока со шкалой. 4) Облака с текстом - каждое внутри блока с точкой, абсолютно спозиционированные по точке - с разными классами - для отображения слева/справа и разных цветов. 5) Ну и отдельные блоки-точки для начала и конца шкалы У данного исполнения ряд плюсов - например точка и облако - один блок, добавить новую - проще простого - по факту скопировать и задать класс для цвета и варианта отображения слева/справа. Данный вариант будет легко адаптировать например на мобильники - легко парой строчек в медиазапросе все облака сделать только слева / только справа, или вообще убрать шкалу, сделать облака статичными и располагающимися друг под другом.
