Как исключить определенные элементы из флексбокса в CSS, не помещая элемент в новый div? ⇐ CSS

[Anonymous]

Я делаю калькулятор, в котором кто-то может добавлять и удалять поля ввода с помощью JavaScript. Я реализовал макет flexbox для раздела, содержащего поля ввода и кнопки. Текущая структура CSS помещает все элементы (поля ввода и кнопки) в столбец, поскольку для родительского контейнера установлено значение flex-direction: columns;.
Проблема в том, что это заставляет мои кнопки также располагаться в столбце, и я хочу, чтобы он был выровнен по горизонтали. Я не могу поместить кнопки в элемент div, так как это будет мешать моему JavaScript.

Код: Выделить всё

function addClass(){
let container = document.getElementById("input-field-1").parentNode;
let fieldLength = container.getElementsByClassName("inputfield").length;
let inputField = document.getElementById("input-field-1");
let clone = inputField.cloneNode(true);
clone.id = "input-field-" + (fieldLength + 1);
let classNumber = fieldLength + 1;
let inputs = clone.getElementsByTagName("input");
inputs[0].placeholder = "Class "+ classNumber;
inputs[0].value = "";
inputs[1].value = "";
inputs[2].value = "";
let addButton = document.getElementById("add-btn");
container.insertBefore(clone, addButton);
}

Код: Выделить всё

.semester-calc {
display: flex;
align-items: center;
flex-direction: column;
}

Код: Выделить всё

Add Class
Remove Class
Clear Classes
Calculate!

Проблема: я хочу, чтобы кнопки располагались горизонтально под полями ввода, но flexbox выравнивает их в столбец. Помещение его в div, похоже, мешает настройке моего родительского контейнера javascript, поэтому я не хочу этого делать. Есть ли способ выровнять кнопки по горизонтали, не изменяя мой JavaScript, или мне нужно просто переделать функцию addClass?

Подробнее здесь: https://stackoverflow.com/questions/786 ... ng-the-ele