Notifications Page

Hi Sarthak,

One thing I would recommend is breaking each individual notification into sections. For example, the first notification could be like this:

<div class="flex">
  <div class="avatar">
     <img />
  </div>
  <div class="content">
    <p><span>Mark Webber</span> reacted to your recent post <span>My first tournament</span> today!</p>
    <p>1m ago</p>
  </div>
</div>

So, breaking this down:

1. The outer div has display: flex; (symbolized by the class), which causes the nested div tags to form a row by default.
2. The content inside the nested div tags is still laid out as normal, within the space allocated to them by flexbox.
3. Since the inner items are still laid out normally, the two p tags stack on top of each other as they are block level elements. This means that no matter how much content is in the first p tag that gives notification information, the timestamp in the second p tag will always be below it.

This setup allows you to break the flexbox div into sections horizontally and then put what content you want inside those sections so that the sections are self-contained (i.e. the notification info won't flow under the avatar when screen size changes) and block level align uniformly (i.e. the two p tags line up along the left edge at all times).

That was a bit of a long-winded explanation so if you need any clarification please feel free to ask. Also feel free to look at my solution since I used the same sort of approach I explained above.

Cheers, Mike