Как бы вы сверстали такой текст?

Question

[massef]

Интересует часть обведенная красным.



Проблема в том что сайт адаптивный и при сужении строки у внутренних списков "рушаться", т.е. они не соответствуют друг другу, оно и понятно почему так, но другого решения я не нашел.
вот как это выглядит


Накидал пример в песке jsfiddle.net/9n86wy26/embedded/result
Еще не нравится то, что отступы у внутренних списков пришлось делать через br

Есть мысли как это можно сверстать чтобы сохранить линию строки если описание получается в две и более строчки?
То есть тут нужен эффект vertical-align: top;

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

p.s. Дизайнер .....
p.p.s. Сори за каскад в песке

Answer 1

[Hovhannes Sargsyan]

может для табличных данных все таки стоит использовать таблицы ?

Он ведь для этого предназначен , уверен что если в этом случии сделать через таблиц, все встанет на место.

Comments

[massef]

Первым делом подумал о таблице, но адаптив все портит. Как корректно отобразить эти данные таблицей при ширине 320px? Тем более что по макету правая часть должна сползать под название раздела.

[Hovhannes Sargsyan]

хм, тогда думаю правильно будет, использовать - display:table и display:table-cell, а для mobile убрать эти данные, разметка то останется div -амы и уже можно положить друг под друга.

Я всегда адаптивные данные всегда верстаю так, под desktop ставлю display:table и display:table-cell, а уже ниже убираю display:table и display:table-cell, и как обычние блоки ставлю друг под другом

[Дмитрий Клусевич]

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

[Hovhannes Sargsyan]

@dimka-dooz: да, иногда реально в таблицах легче данные верстать, не только сематично, но согласен надо делать так как в конкретной ситуаци требуется.

Answer 2

[Alexander Sydorenko]

Ну раз таблица не годится(хм..)
тогда с использованием адаптивной сетки того же бустрапа, думаю можно добиться желаемого результата.

на вскидку так jsfiddle.net/9n86wy26/2 (уменьшайте экран, единственное что для .left, .right надо добавить пару медиа-запросов, чтобы они выравнивание и отступы делали только на экранах больше 768px)

Answer 3

[Sali_cat]

Однозначно в таблице. И выравнивание текста по правому и для 2й ячейки по левому, т.е так и оставить.

Answer 4

[Дмитрий Клусевич]

jsfiddle.net/j6ps6ucr/1 Вот что наверное нужно. можешь поиграться с шириной и медиазапрос ставь по твоим нуждам