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

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 class="container">
        <div class="container">
            <button id="strength"><strong class="center">Strength</strong></button>
            <button id="expandButton" onclick="expandSkills()"><strong class="center">Expand</strong></button>
            <button id="minion"><strong class="center">Minion</strong></button>
        </div>
        <button id="xpButton"><strong class="center">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";
    }
}
javascripthtmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions