Interactive online courses HTML Academy
2026-03-09 14:09 Diff
https://htmlacademy.org/courses/layout/flexbox-2/heading-description

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Heading with description, part 2

Now let’s check how our layout works if we add a bit more text.

If the content overflows, configure the container to overflow the flex items onto a new line.

Comments

  • index.html
  • style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Heading with description, part 2</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="subtle"> <section class="card"> <h1 class="card-title"> <span class="card-title-main">Muffin against flexboxes</span> <span class="card-title-note">A coming-of-age story</span> </h1> <p>Over the course of his long career as a front-end web developer, Muffin has seen a lot of confusing solutions…</p> </section> <section class="card"> <h1 class="card-title"> <span class="card-title-main">Muffin loves flexboxes</span> <span class="card-title-note">A success story</span> </h1> <p>It has been hard-going learning all of the ins and outs of flexboxes, but look at the new capabilities that Muffin has access to thanks to this “flexible” layout…</p> </section> </body> </html>

CSS

.card { margin-bottom: 20px; line-height: 1.3; } .card-title { display: flex; align-items: flex-end; margin-top: 0; } .card-title span { border: 1px solid #999999; background-color: #c8dcff; } .card-title-main { flex-grow: 1; }

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%

  1. Replace the text Muffin loves flexboxes with Instructor Muffin and the amazing flexbox,
  2. and then configure flex items to overflow onto a new line for the .card-title block.
  3. Remove the frame and background color from the .card-title child spans.