CSS Flex

Hello @sanyomor-01. Welcome to Frontend Mentor Community!! 🎉

When building these projects the best approach is start Mobile-first workflow and then do desktop. To answer your question, by default elements are column and you can change the layout using <flex-direction> CSS property.

Here is a CSS Grid example below.

HTML📃:

<main>
    <article>
       <div class="flex-1">Flexbox group 1</div>
       <div class="flex-2">Flexbox group 2</div>
      </article>
    </main>

CSS🎨:

• You can use flexbox and or CSS Grid in most every project. CSS Grid saves you few lines of CSS as well.

/* Using CSS Grid places content in the center of the page*/
main {
  display: grid;
  place-content: center;
  min-height: 100vh;
}
/*Grid template columns gives you two columns side by side*/
@media (min-width: 50em) {
  article {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

Here is my solution to this challenge Results summary component

Hope that I answer your question and don't hesitate to reach out to me if you have any questions