Lesson 6 of 7

Line the cards up side by side

Name: HTML for Builders — Level 2
Price: 6.99 EUR
Availability: InStock

By default, divs stack. To put them side by side, wrap them in a <div class="row"> with display: flex.

gap adds space between the cards — nicer than glued together!

<div class="row">
  <div class="card">…</div>
  <div class="card">…</div>
</div>
<style>
  .row {
    display: flex;
    gap: 12px;
  }
</style>

🎯 Your mission

Wrap your two cards in a <div class="row">, then give .row the property display: flex (and a gap if you like).

PRO lesson

This advanced chapter is part of CodeAge PRO. Unlock it to keep your adventure going.