'How could I make these two DIVs stand next to eachother? [duplicate]

I don't quite know how to explain this but I want to make these 2 stand next to eachother and I don't know how.

Please note that the section needs these properties: display:flex justify-content:space-evenly; flex-direction: column

Otherwise, it will not look as expected

This is the code:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');</style>
    <link rel="stylesheet" href="style.css">
    <title>Server Status</title>
</head>
<body>
    <main>
            <section class="glass">
                <div class="dashboard">
                    <div class="mainstatus">
                        <img src="/images/check_big.png" alt="">
                        <h3>All systems are<br>Operational.</h3>
                        <!--   -->
                    </div>
                </div>
                <div class="statdashboard">
                    <div class="fnservers">  <!--fnservers = functioning servers, shown as 3/6 and a progress bar-->
                        <h1>Active Servers: 0/6</h1>
                        <div class="activeperbar"> <!--Active Percentage Bar-->

                        </div> 
                    </div>
                    <div class="cards">
                        <div class="sectiontitle">
                            <div class="infoeu1">
                                <h2>VPS Nodes</h2>
                            </div>
                        </div>
                        <div class="card">
                            <img src="/images/operational.png" alt="">
                            <div class="infoeu1">
                                <h2>EU CENTRAL-01</h2>
                                <p><strong>Operational.</strong></p>
                            </div>
                        </div>
                        <div class="card">
                            <img src="/images/exp_issues.png" alt="">
                            <div class="infoeu2">
                                <h2>EU CENTRAL-02</h2>
                                <p><strong>Experiencing Issues...</strong></p>
                            </div>
                        </div>
                        <div class="card">
                            <img src="/images/notmonitored.png" alt="">
                            <div class="infoeu3">
                                <h2>EU CENTRAL-03</h2>
                                <p><strong>Not monitored</strong></p>
                            </div>
                        </div>
                        <div class="card">
                            <img src="/images/maintenance.png" alt="">
                            <div class="infoeu4">
                                <h2>EU CENTRAL-04</h2>
                                <p><strong>Under Maintenance.</strong></p>
                            </div>
                        </div>
                    </div>
                    <!--  -->
                    <div class="cards2">
                        <div class="sectiontitle">
                            <div class="infoeu1">
                                <h2>Racks</h2>
                            </div>
                        </div>
                        <div class="card2">
                            <img src="/images/operational.png" alt="">
                            <div class="infoeu1">
                                <h2>EU CENTRAL-01</h2>
                                <p><strong>Operational.</strong></p>
                            </div>
                        </div>
                        <div class="card2">
                            <img src="/images/exp_issues.png" alt="">
                            <div class="infoeu2">
                                <h2>EU CENTRAL-02</h2>
                                <p><strong>Experiencing Issues...</strong></p>
                            </div>
                        </div>
                        <div class="card2">
                            <img src="/images/notmonitored.png" alt="">
                            <div class="infoeu3">
                                <h2>EU CENTRAL-03</h2>
                                <p><strong>Not monitored</strong></p>
                            </div>
                        </div>
                        <div class="card2">
                            <img src="/images/maintenance.png" alt="">
                            <div class="infoeu4">
                                <h2>EU CENTRAL-04</h2>
                                <p><strong>Under Maintenance.</strong></p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
    </main>
</body>
</html>

CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

p{
    color:rgba(240, 255, 255, 0.489);
}

main{
    min-height:100vh;
    background: linear-gradient(to right bottom, rgb(32, 38, 53), rgb(39, 54, 52));
    display:flex;
    align-items:center;
    justify-content: center;
}

.glass {
    background:white;
    min-height:80vh;
    width:80%;
    border-radius:30px;
    background:linear-gradient(to right bottom, rgb(42, 49, 68), rgb(50, 68, 66));
    backdrop-filter: blur(2rem);
    display:flex;
}
.dashboard {
    flex:1;
    display:flex;
    flex-direction: column;
    text-align: center;
    color:azure;
    font-size:24px;
    justify-content: space-evenly;
    background:linear-gradient(to right bottom, rgba(57, 66, 90, 0.5),rgba(79, 103, 100, 0.3));
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}
.statdashboard {
    flex: 4;
    color:azure;
}

.fnservers{
    margin-bottom:2rem;
}

.statdashboard{
    margin:1rem;
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;
    
}

.card {
    background:linear-gradient(to right bottom, rgba(57, 66, 90, 0.5),rgba(79, 103, 100, 0.3));
    border-radius:20px;
    margin:1rem 0rem;
    padding: 10px;
    margin-right:70%;
    text-align:center;
}

.cards2{
    top:11%;
    left:50%;
    display:flex;
    justify-content: space-evenly;
    flex-direction: column;
}

.card2 {
    background:linear-gradient(to right bottom, rgba(57, 66, 90, 0.5),rgba(79, 103, 100, 0.3));
    border-radius:20px;
    margin:1rem 0rem;
    padding: 10px;
    margin-right:70%;
    text-align:center;
}

Please help me I really need it!

This is how I want it to look: enter image description here

This is how it currently looks: enter image description here

htmlcssandroidgoogle-chromewebmobilebrowser


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