Как расположить элементы относительно других?

Question

[weranda]

Есть вот такой код: https://codepen.io/weranda/pen/XWXaQjN
Должно выглядеть вот так:

Недавно начал вникать во flexbox и не могу понять, как сделать так, чтобы подпись к группам элементов была строго снизу по центру групп. Суть еще в том, что все элементы верхнего контейнера должны быть одинаковой ширины и самостоятельно тянуться, кроме элементов разделителей (между блоками) и элементов с заданной вручную шириной.
Какие есть варианты решения данной задачи?

Comments

[meaqese]

В чем проблема сделать обычной таблицой?

[weranda]

meaqese, патамушта нельзя таблицей делать.

[Ankhena]

Всегда мучает вопрос: зачем пытаться использовать технологии, которые не подходят или заставляют костылить, при наличии других технологий, чётко и элементарно решающих задачу?

Берете гриды и вперед. Раз нельзя таблицей. Почему, кстати?

[weranda]

Ankhena, Потому что есть объемный JS код, которых не заточен под таблицы + есть другие нюансы.

[Ankhena]

weranda, ок
Тогда гриды

Answer 1

[Арсений Матыцин]

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

Comments

[weranda]

Затем вопрос и задал, чтобы подсказали как конкретно сделать.

[Арсений Матыцин]

weranda, используя таблицы или гриды.

Answer 2

[Luka Tarkhnishvili]

Я вижу лишь такой вариант: https://codepen.io/lukatarkhn/pen/gOPxJpO

Comments

[weranda]

Фиксированная ширина не катит. Можно было бы и без флексов такое сделать, если ширину зафиксировать. Фиксированной ширины должны быть лишь разделители и один элемент, а остальные должны "плясать", но с одинаковыми ширинами.