Single price grid component // Mobile First, Grid

Hi Katrien, the simplest solution - put those 2 elements into one container, and make it flex {display: flex; align-items: center;}. Adjust other needed css properties (margin, padding) for child elements as well.

Cheers, Roman

Hi Katrien, I solved the $29 with placing "$29 per month" into a div giving both "$29" and "per month" a p tag with a unique class. (Maybe an ID would be better?) `<div class="flex-container__row"> <p class="dollar">$29</p> <p class="month">per month</p>

</div>`

Than I applied in CSS display: flex to the div. So the pelements are aligned by default in a row.

To center the month class vertically I need the align property from flex. So I have in my CSS:

.month { align-self: center; color: var(--light-gray); padding-right: 90px; } Hope, this makes sense. Best, Sven

👋 Katrien

Congrats! Desktop is close 👍

Don't forget the border-radius.

Regarding the mobile version, it currently fills up the whole screen and doesn't look like a component (or the mobile design).

I'd suggest in wrapper set width: 90%; and the margin: auto; and remove height: 100vh; from container and add the following to body

    height: 100vh;
    margin: auto;
    display: flex;
    flex-direction: column;

Keep up the great work

🖖