Свойство display: table-cell не срабатывает на инпутах

Нужно сделать, чтобы кнопки в ряд занимали всю ширину .row
Сейчас они смещены влево и не тянутся на всю ширину, хотя им присвоено свойство display: table-cell;
Вопрос: почему display: table-cell не работает для инпутов? И можно ли достичь желаемого результата не оборачивая input в дополнительные div?
.row{ display: table; table-layout: fixed; width: 100%; border-spacing: 1px 0; background-color: #eee; } .input{ display: table-cell; }

Ответ

Нужно переделывать на Flexbox, если количество кнопок неизвестно:
.row { height: 25px; display: flex; flex-direction: column; flex-wrap: wrap } .row input { page-break-inside: avoid; break-inside: avoid; }

Или же поставить ширину 25%, если их количество фиксированно:
.row{ display: table; table-layout: fixed; width: 100%; border-spacing: 1px 0; background-color: #eee; } .input{ width: 25%; /* Убираем влияние padding и border на конечную ширину input */ box-sizing: border-box; /* Обнуляем margin */ margin: 0; }