Как последние 2 элемента flex блока сделать на одной линии?

Question

[Даниил Конев]

Есть конструкция:

<div class="box"> 
<p><input></p>
<p><input></p>
<p><input></p>
<p><input></p>
<p><input></p>
<p><input></p>
<p><input></p>
</div>

Стиль:
.box {
display: flex;
flex-direction: column;
}

Как последние два элемента сделать на одной линии? flex-direction: column; ставит их сверху вниз. Я уже что только не пробовал, ставил для последних блоков разные display и пробовал ширину 49.9% Никак не приду к истине. Возможности добавить обертку div нет возможности, пункты выводятся системно плагином.

По сути должно получится так:

Answer 1

[Вадим]

• Обернуть 2 последних в один общий блок
• Не использовать flex-direction: column, а задать flex-wrap и всем кроме последних двух width: 100%, последним по 50.
• Использовать гриды

Comments

[Даниил Конев]

Нет такой возможности. Системно выводится плагином, нужно лесть в код и колхозить там.....

[Вадим]

Ivseti, обновил ответ.

[Даниил Конев]

Вадим, одна голова хорошо, а две лучше. Спасибо, сделал флекс боксом. Крутой вариант! Возьму на заметку. С гридами не работал ни разу, flex боксы рулят.