"Some how made it work"_Single price grid component

Hi KT,

Welcome here, well done :D

According to your questions:

• you can use the span tag inside of the p tag, I did two paragraphs but in my opinion I could use the p with span inside of it (I think it is even better);
• of course, these challenge can be done by using the grid. The best idea is to start from mobile first => one column, then create only one @media for tablets and get the final design pattern. It is very easy to center element (check google, ask the question => proper research will be the main key of our work as a developers in the future);

Also, I have checked your project, mainly the HTML structure by using the inspector in my browser, a few tips below:

• this is a single page component so you can add the h1 tag with two spans inside of it (main-heading and sub-heading) or h1 and h2 in the first box;
• instead of the h5 I'd suggest to use the h2;
• instead of a button I'd recommend using a link. Check this article from the blog CSS-tricks: => A Complete Guide to Links and Buttons;
• in the third box instead of using many p tags you can add ul > li;
• names of classes are not readable and descriptive => the BEM naming convention can be a nice solution here;
• check a project on different devices in your browser by the inspector. The problem appears because you have added an explicit width to the main tag and card. That's not a good practice especially that you want to use the flexbox or grid. It is essential to understand well the height and width vs min-height/max-height & min-width/max-width. You shouldn’t need to give items height unless they have a background or absolutely-positioned or floated elements within them that would not normally be accounted for in the height of an element. Experienced developers use min-height and min/max-width more than anything else. It allows elements to grow and shrink.

Ps. Don't forget to upvote any comments on here that you find helpful.

Greetings :D