Change elements display order after click event – javascript

After i click on Calculate button “Reset” button appears below it, but i want to change the display styles how they both appear after the click event. I want them side by side and not on top of each other (picture in link represents the idea) I tried doing it by toggling a class after click, but in that way i could change only one element appearance. What would be the best way to do it?
Button order example

HTML code

<div class="container">
        <header>
          <div class="h1-background">
            <h1 class="h1">Tip calculator</h1>
          </div>
        </header>
        <div class="text">
    
          <p>How much was your bill?</p>
          <form name="theForm3">
            <input class="input-bill" placeholder="Bill Amount $">
            <p>How big tip will you give?</p>
            <!-- DROP DOWN-->
            <div class="select">
              <select class="percents">
                <option value="1">Nothing</option>
                <option value="0.5">5%</option>
                <option value="0.10">10%</option>
                <option value="0.15">15%</option>
                <option value="0.20">20%</option>
                <option value="0.30">30%</option>
    
              </select>
            </div>
          </form>
          <!-- AFTER DROP DOWN-->
          <p>How many people are sharing the bill?</p>
          <input class="input-people" placeholder="Number of people">
          <button onclick="calculateTip(), changeStyle()" class=" button center button-calc"
            type="button">Calculate
          </button>
    
          <button onclick="" class=" button center reset-button" type="button">Reset
          </button>

JS CODE

"use strict";
const buttonCalc = document.querySelector(".button-calc");
function calculateTip() {
    //Selectors
    const inputBill = document.querySelector(".input-bill").value;
    let inputPeople = document.querySelector(".input-people").value;
    const percents = document.querySelector(".percents").value;
    //Event listeners

    //validate input
    if (inputBill === "" || percents == 0) {
        alert("Please enter values");
        return;
    }



    //Check to see if this input is empty or less than or equal to 1
    if (inputPeople === "" || inputPeople <= 1) {
        inputPeople = 1;

        document.querySelector(".each").style.display = "none";

    } else {
        document.querySelector(".each").style.display = "block";
    }


    //Functions
    let total = (inputBill * percents) / inputPeople;
    console.log(total);
    //round to two decimal places
    total = Math.round(total * 100) / 100;
    //next line allows us to always have two digits after decimal point
    total = total.toFixed(2);
    //Display the tip

    // Display alert i there is no TIP
    if (percents == 1) {
        alert(`There is no tip, you must pay only the bill $${total}`)
        return;
    }


    document.querySelector(".reset-button").style.display = "block";
    document.querySelector(".totalTip").style.display = "block";
    document.querySelector(".tip").innerHTML = total;

}


function changeStyle() {
    let container = document.querySelector(".container");
    container.style.height = "400px";
    event.preventDefault();
}


//Hide the tip amount on load
document.querySelector(".reset-button").style.display = "none";
document.querySelector(".totalTip").style.display = "none";
document.querySelector(".each").style.display = "none";