Как сделать адаптивно вот такую карточку товара?

Question

[Konstantin Web]

Есть вот такой блок, с вкладками. В блоках есть пункты, типа:

Бренд................................................................................................................................................Luberg.
Название модели..............................................................................................................................KLD-34.
И т.д.

Как это делать адаптивно? Я имею ввиду, что бы при маленьких разрешениях, эти точки уменьшались в количестве, на малых размерах? Ну а на больших дисплеях заполняли всю ширину контейнера. Искал по интернет-магазинам, но они видимо древние и не имеют адаптивности, а сверстано на таблицах. Может так и надо? Типа средний контейнер таблицы резиновый, а по бокам элементы на ширину текста? Подскажите пожалуйста, как такое сделали бы вы? Может уже где-то реализовывали, буду благодарен за ссылку, что бы глянуть код.

Comments

[Виталий Першин]

Вчера задавали такой же вопрос Как правильно сверстать такой элемент?

[Konstantin Web]

Спасибо большое:)

Answer 1

[Анатолий Куликов]

Первое, что приходит на ум - используйте флекс, логика примерно такая - строчка, в ней три элемента. Первый - название, третий - значение. Второй должен занимать всё остающееся пространство - в нем просто делаете border-bottom точками или на фон нужное изображение.

Вот вроде как и всё.