Clearly, this is one-dimensional and we did implement this using Flexbox. However, we didn't make it responsive. So let's go back to the code now and do it. I'll quickly make some small changes. I'll also add a padding of about 2rem, close this block here and start a new block so we can keep the Flexbox-related styles separately here. Now going by the mobile-first approach, let's add flex-direction column. And here, within media-queries, at media-screen and min-width about 767 pixels, let me change the direction of section flex-direction to row. And this also comes within the media-queries because we want equal blocks only after this.

This gives a single column layout by default, so simply adding a gap of 1.5 rem is sufficient for mobile layout. For desktop, copy the media-queries. And for the section, now we need three equal columns. So I need to just do grid-template-columns, repeat(3, 1fr). And that's it. Let's verify. Yes, we have the exact same result. Now did you notice something? With Flexbox, it took more effort or more lines of code as compared to Grid to get the

But let's say we wish to add this pricing to the right on top here, we can use Flexbox for that, that is, within this component. Let me show you. For that, I need to first wrap these two, the heading and the span, in another div. So let's quickly do that. We'll do that in each of the blocks and div, right? And now for plan, you can add display: flex and justify-content: space-between because we want them to be at the two ends, left and right. Let me also change the font size of this. So plan B, font size 1.5rem, and then we seem to have a top margin.