Website: Style the Event

11. Style the Event

Use your cheat sheet – and do it right!

Mentor Seraphina

Seraphina eyes you with a look that lands somewhere between challenge and sheer delight. “I’ll give you just one tip. Write your HTML wisely, use the classes from your cheat sheet – and you’ll need exactly eight extra lines of CSS.
And yes, I’m counting the brackets.”

Your task

Style the .date container so that its child elements automatically wrap when space gets tight. Make sure the content remains vertically centered and that there’s a consistent gap between elements.

Ensure that each direct child of .date gets a flexible width – but never becomes too narrow.
Each element should:

Be at least 20rem wide
But still be able to grow or shrink depending on the available space

Solve the task here in the console [–> Open in a new tab]

CSS

.date {
   gap: var(--spacing-base);
   align-items: center;
   flex-wrap: wrap;
}
.date>div {
   flex: 1 1 20rem;
}