Price Cards
Now the three price cards. They stand side by side in a row, 16px apart, and together they fill the whole width of the page's content. Each card needs at least 200px, so on a narrow screen, they don't all fit in one row. Then as many cards as fit stay in the row, the others move to the next row, 16px lower, and the cards in each row grow to fill it.
The descriptions in the cards are of different lengths, but the cards in a row are equally tall. The Choose buttons are at the very bottom of the cards, so that they are all level.
To see the cards wrap, make your browser window narrower (or wider, if they already wrap).
After this exercise, the page looks like this (smaller):
A tip: each card is a flex item, but its own content can be laid out with flexbox too, in a column. And remember which items get the free space.
Instructions
The cards stand side by side, 16px apart, and fill the width of the page's content. Each card is at least 200px wide: the cards that don't fit move to the next row, 16px lower, and fill it too.
The Choose buttons are at the very bottom of their cards, all level.
Start programming for free
2/3