<body>
        <div class="poke"> quiz</div>

        <div class="container">
            <div class="Child one">quiz 1</div>
            <div class="Child two">quiz 2</div>
            <div class="Child three">Twitter</div>
            <div class="Child four">Snap</div>
            <div class="Child five">Text</div>
        </div>

        <div class="Parent">
            <div class="questions">
                <div id="question-container" class="hide">
                    <div id="question">Question</div>
                    <div id="answer-buttons" class="btn-grid">
                        <button class="button">Answer 1</button>
                        <button class="button">Answer 2</button>
                        <button class="button">Answer 3</button>
                        <button class="button">Answer 4</button>
                    </div>
                </div>

                <div class="controls">
                    <button id="start" class="start-button">start</button>
                    <button id="next" class="next-button hide">next</button>
                </div>
            </div>
        </div>
    </body>
body {

}

.container {
    background-color: antiquewhite;
    display: inline-flex;
    padding: 5px;
    flex-direction: column;
    min-width: 150px;
    height: 100vh;
}
.Child {
    padding: 5px;
    border: solid;
}

.one {
}

.four {
}

.poke {
    height: 100px;

    border: solid;

    text-align: center;
    background-image: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.Parent {
    display: inline-flex;
    justify-content: center;
    border: solid;
    background-color: lightblue;
    min-width: 500px;
    
}

.Parent.correct {
    background-color: lightblue;
}

.Parent.wrong {
    background-color: red;
}


Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.