First Attempt - Product Preview

Hello,

First of all congratulations, really nice job :)

I'm a beginner too but i can try to answer your questions.

1. Yes you can also do it with grid. But flex works well here. (and maybe with a display inline?? dont know not a good practice i guess)

2. The button goes outside the div cause of your max-height. Try to change your breakpoint to keep the same properties and cancel this behaviour or add another breakpoint with another max-height.

Bye !

Hello Trevor, congratulations for your solution!

Answering your question:

Another alternative to create this component, is using grid is even more simple than with flexbox.

To build the component with 2 columns you can use max-width: 900px for the container size and display: flex and grid-template-column: 1fr 1fr for the layout this way you'll have the layout done. And the two divs inside will have 50% the parent size. To manage the column with text content use flex.

To avoid the pricing section poping out of the container create a media query changing the price section flex-direction: column to have one text below the other.

Hope it helps and happy coding! 👏