So here what we have in the mobile layout, already both the sections are one below the other, but the gap is missing. So this is the first thing we work on. Here's a style tag. We have the stylesheet here, but you'll get confused if we add styles into that huge sheet. So we'll add all the Flexbox-related styling right here. Now container is the parent element of both the sections. So let me turn this into a flex container, sorry, display: flex, we have flex-direction, we need flex-direction: column for the mobile layout, along with the gap of about 2rem. This is all we'll need for the mobile layout.

Next, let's focus on each section's content starting from here. Right here, we need the logo and this heading to be next to each other and also vertically center aligned. That is simple, right? Let's do that. What is that section? That section is a title div right here. So title div display flex and maybe a gap of 1rem and alignItems center. Yeah, this is done. Great.

First is this tabs navigation. We need three tabs in a row with equal widths. Right now, this is what we have. So let's do that. Let me just minimize this, maximize this. Yes. So nav ul is the parent container for the three tabs. So let me select sidebar nav ul and add display: flex to that. Now we have all the three tabs in a row, but they are not of equal width. To make them equal width to each of the items, that is sidebar nav ul li, add flex: 1.

That is the logo, this heading and the star in a row. So let's work on that now. That would be the header section, sorry, the header element of sidebar card. So copy this sidebar card header needs to be a flexbox. So display: flex; Yes. They're in a row. We need a small gap of about, I think, 0.8rem. Now this looks like it's perfect, but let's say we have the heading slightly smaller, something like just WordPress developer.

Okay. Yeah. Now this is perfect. And then down here, we have something similar. This is in a flex container and then we have to push the active and nineHoursAgo to the right. So down here, this is the footer sidebar cardFooter. That is a flexbox. So display: flex and then sidebar card. What's that?

Instead they are stacked one below the other here. These two elements are in a row, but, uh, after a breakpoint, they are in a column. So let's work on that first. That would be, that would be within the main section. So let me collapse the sidebar and in the main section, we have activity li. Now each of the activity lis are flex containers. So activity li, what is this? Yes. activity li display flex. And as you saw, this was a flex-direction row in the mobile layout, but they were spaced.

itself is a flex container with these items being in, uh, the column direction with some gap. Right? So let's add display: flex to the parent of these list items. That is the activity itself. Activity itself is, has display: flex and flex-direction: column with some gap, gap of 1rem. Right? So now it's perfect. The mobile layout is perfect.

But here we have the label at the top and numbers at the bottom. Do you remember there was another flex direction apart from row and column? Yes, there was column-reverse. That's when the items start from below and then go to top. That's exactly what we need here. Now you see that the label is at the bottom and number at top. So the only thing now pending is each of the flex items seems to have a fixed width here and that can be set using flex-basis. So activity li beyond 600 breakpoint has a flex-width, flex-basis, I think about 12rem. What do we have?