eugene159,
Флоаты вам тут не помогут, придётся задавать ширину или вообще запрещать перенос.
Таблица поможет, но вероятно, распределение ширины ячеек будет таким же как и у флексов. Но проверять мне лень.
Разумно делать так, чтобы в нужных по ТЗ браузерах, сайт отображался ровно, ничего и никуда не выпадало, а вовсе не приводить к идентичному виду. Именно это будет адекватной кроссбраузерностью.
eugene159, что-то я устала.
Если вы хотите установить ограничения для размеров, то используйте гроу, шринк, базис, ширину и т. д.
Если хотите переносы в нужных местах, то используйте типографские знаки.
Или комбо этих свойств.
Все инпуты располагаем до всех лейблов. После этого начинают работать селекторы с тильдой ~
т.е. инпут ~ соответствующий лейбл и лейблы куда можно сходить "лошадью".
Но больше мне нравится идея Рустам Байназаров нарисовать в псевдоэлементе клеточки с помощью градиента и накладывать его абсолютом относительно нужной клетки (лейбла).
Muslim Mamaev, как выглядит полная вся таблица?
Во всех строках в предпоследнем столбце ячейка разделена на 2 части?
Что там с данными, должна ли эта конструкция перестраиваться на мобилках, если да, то как?
Muslim Mamaev,
переделать всё на флексы
убрать кучку лишних оберток, (я имею в виду .wrappers)
задать выравнивание
задать нижнюю границу для .box:not(:last-child)