How would I create buttons so that they are in a line with all other buttons?-CodePudding

I am trying to show two buttons, id="strength" and id="minion", when I click a button, id="expandButton", and hide them when I click the button again. I want the two buttons created to be either side of the button that creates them. I tried putting them in a <div> together and adding a class with display: flex; and justify-content: space-around;, but that just put the buttons next to each other above the button that created it. Ideally I need a way to move the two buttons down a bit so that all of the buttons are in a line.

Fiddle: https://jsfiddle.net/eL8omg9x/

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div >
        <div >
            <button id="strength"><strong >Strength</strong></button>
            <button id="expandButton" onclick="expandSkills()"><strong >Expand</strong></button>
            <button id="minion"><strong >Minion</strong></button>
        </div>
        <button id="xpButton"><strong >Click Me!</strong></button>
     </div>
     <script src="main.js"></script>
</body>
</html>

CSS:

.container {
    display: flex;
    justify-content: space-around;
}
#strength {
    display: none;
    cursor: pointer;
    height: 100px;
    width: 100px;
    border: 2px solid green;
    border-radius: 10px;
    background-color: white;
    color: green;
}
#expandButton {
    display: flex;
    margin-top: 100px;
    cursor: pointer;
    height: 150px;
    width: 150px;
    border: 2px solid green;
    border-radius: 10px;
    background-color: white;
    color: green;
}
#minion {
    display: none;
    cursor: pointer;
    height: 100px;
    width: 100px;
    border: 2px solid green;
    border-radius: 10px;
    background-color: white;
    color: green;
}
#xpButton {
    display: flex;
    margin-top: 100px;
    cursor: pointer;
    height: 150px;
    width: 150px;
    border: 2px solid green;
    border-radius: 10px;
    background-color: white;
    color: green;
}
.center {
    display: flex;
    margin: auto;
}

JavaScript:

function expandSkills() {
    let x = document.getElementById("strength");
    let y = document.getElementById("minion");
    let z = document.getElementById("skillsContainer");
    if (x.style.display === "none") {
        x.style.display = "flex";
        y.style.display = "flex";
        z.style.justifyContent = "space-evenly";
    } else {
        x.style.display = "none";
        y.style.display = "none";
        z.style.justifyContent = "space-evenly";
    }
}

CodePudding user response：

adding margin-top during displaying of two buttons works or
removing margin-top from expand button css also works Since for expand button margin-top is added

function expandSkills() {
    let x = document.getElementById("strength");
    let y = document.getElementById("minion");
    if (x.style.display === "none") {
        x.style.display = "flex";
        y.style.display = "flex";

        **//ADDING MARGIN TOP**
        y.style.margin = "100px 0 0 0";
        x.style.margin = "100px 0 0 0";
       
    } else {
        x.style.display = "none";
        y.style.display = "none";
    }
}

removed skillsContainer code as it was not defined in html