Order Summary Component

Hi @stepheigbe,

You've a great solution here but there is a tag you can consider changing in the html, the h2 should be wrapped with an h1.These changes don't change the design but improve the accessibility and semantic.

Hope it helps, happy coding 👋

👾Hello @stepheigbe, congratulations for your new solution!

Answering your question:

The property that makes the content stay in different rows is flex-direction: column; apply that and you'll see the difference

main {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

🐸 Use this mini game to learn FLEXBOX and all its properties by positioning the frog and become a FLEXBOX MASTER here's the link: https://flexboxfroggy.com/

👋 I hope this helps you and happy coding!

Hey there, great work on your solution! To place attribution on bottom and not effect the rest of your layout you can use:

.attribution { 
    font-size: 11px; 
    position: absolute;
    bottom: 0;
}

Absolute positions the element relative to it's parent without effecting any other element. Since parent of attribution is the main, you'd want to move it out of main and make it's parent body. To keep it semantic, you can use <footer> on attribution instead of div. Hope this answers your questions, happy coding :)