I am making calculator where someone can add and remove input fields using JavaScript. I’ve implemented a flexbox layout for the section that contains the input fields and buttons. The current CSS structure places all elements (input fields and buttons) in a column because the parent container is set to flex-direction: column;. The problem is that this makes my buttons to be in a column as well and I want it to be horizontally aligned. I cant wrap the buttons in a div since it will interfere with my javascript.

HTML:

<div class="semester-calc">
    <div class="inputfield" id="input-field-1">
        <input class="class-name" type="text" placeholder="Class 1">
        <input class="grade-val" type="text" placeholder="Grade">
        <input class="credit-val" type="text" placeholder="Credits">
    </div>
    <!-- Additional input fields -->
    <button id="add-btn" onclick="add()">Add Class</button>
    <button id="remove-btn" onclick="remove()">Remove Class</button>
    <button id="clear-btn" onclick="clearClass()">Clear Classes</button>
    <button id="calculate-gpa" onclick="calculate()">Calculate!</button>
</div>

CSS:

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

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);
}

Problem: I want the buttons to align horizontally below the input fields but the flexbox makes them align in a column. Putting it in a div seems to interfere with my javascript parent container setup so I dont want to do this. Is there a way I can align the buttons horizontally without altering my javascript or do I have to just redo my addClass function?