Как установить одну и ту же ширину элементов в разных блоках?

Question

[weranda]

Приветствую.
Как установить одну и ту же ширину элементов в разных блоках?
Есть вот такой код: https://jsfiddle.net/pm0v6hkb/

Есть два разных блока. В первом блоке находятся заголовки, во стором — значания. Блоки в разных блоках. Как сделать так, чтобы все блоки сжимались до минимального заполнения контента внутри них, а блок №4 (Description) растягивался во всю ширину содержимого.

В таблице это выглядит так:


На картинке это выглядит так:


Дело в том, что получается так, что блоки независимы, внутри них может быть содержимое разной ширины, но визуально ширина каждого блока должна соответствовать все блокам и заголовкам + все это должно еще тянуться туды-сюды. Таблицы не подходят. Высчитывать +- размеры блоков и делать их фиксированными не очень хочется. Подтягивать JS то же не очень решение для этого случая. Подскажите, пожалуйста, варианты, желательно с конкретными примерами.

Comments

[Александр Васильев]

А сразу таблицу сверстать?

[weranda]

Александр Васильев, Таблицы не подходят. Надо на div'ах.

[Александр Васильев]

weranda, если не таблицы, то гриды, хотя последующее заполнение гридов контентом не будет удобно-логичным.
Если дается таблица- почему табличная верстка не подходит?

[weranda]

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

[Александр Васильев]

weranda, ок, “туды-сюды» - это серьезный x-фактор, дело твое.
Но на первый и второй взгляд все это из пушки по воробьям или «а давайте используем react для клика по кнопке».

[Aetae]

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

Для таблиц надо использовать таблицы, они для этого предназначены. Второй вариант, как и сказали выше - гриды: тоже можно, в каком-то месте будет удобнее, в каком-то хуже. Последний вариант - тонна javascript'a: тогда чё хочешь вороти и живи потом в проклятом мире который сам и создал.:)

[Андрей]

как вариант через grid
колонкам задать фиксированные значения
4 й дать 1fr

Answer 1

[Ivan Ustûžanin]

если сильно хочется пострадать садомазо и уровень поддержки устраивает, то можно попробовать Subgrid: