how to make notification page i am struggling with user box - html

Question

I want it to look like this
but it look's like this
I used max-height it didn't work
I used position it didn't work
I messed with size it didn't work
body {
text-align: center;
background: hsl(210, 60%, 98%);
font-family: sans-serif;
margin: 0;
}
#Notifications-page {
display: table;
max-width: 90%;
min-width: 150px;
border-radius: 15px;
text-align: center;
margin: 5% 25% 5% 25%;
padding-bottom: 10px;
background-color: hsl(0, 0%, 100%);
}
.relative-left {
position: relative;
float: left;
}
.messages {
display: table;
width: 90%;
margin: auto;
border-radius: 15px;
background-color: white;
}
.unread-color {
background-color: hsl(211, 68%, 94%);
}
.user-img {
width: 7%;
margin: 15px;
}
.messages-h1 {
font-size: 1.3rem;
margin-right: 8px;
margin-bottom: 0;
font-weight: bold;
}
.P-margin {
margin: 21px 4px 0 4px;
}
.P-1 {
color: gray;
}
.P-2 {
color: hsl(219, 12%, 42%);
font-weight: bold;
margin-right: auto;
}
.P-3 {
display: block;
margin-right: 80%;
position: relative;
float: right;
font-size: 0.8rem;
}
<section id="Notifications-page">
<div class="messages unread-color relative-left">
<img class=" user-img relative-left" src="assets\images\avatar-nathan-peters on.webp" alt="">
<p class=" relative-left messages-h1">Nathan Peterson </p>
<p class=" relative-left P-margin P-1"> reacted to your recent post</p>
<p class=" relative-left P-margin P-2">5 end-game strategies to increase your win rate</p>
<p class="P-3">2 weeks ago</p>
</div>
</section>

Answer 1

You would want none of those elements to be block, as from seen in the desired result the elements are all inline (except for the bottom timestamp). This should suffice:
*
{
font-family: 'Arial', sans-serif;
margin: 0;
}
html, body
{
height: 100%;
}
body
{
background: whitesmoke;
display: flex;
}
section#Notifications-page
{
background: white;
margin: 0 auto;
color: gray;
width: 600px;
}
section#Notifications-page > div
{
padding: 40px;
display: flex;
gap: 15px;
}
section#Notifications-page > div img
{
height: 40px;
width: 40px;
object-fit: cover;
border-radius: 50%;
}
section#Notifications-page > div div
{
flex: 1;
}
b.user
{
color: black;
}
<section id="Notifications-page">
<div>
<img src="https://cdn1.vectorstock.com/i/thumb-large/77/30/default-avatar-profile-icon-grey-photo-placeholder-vector-17317730.jpg" alt="">
<div>
<p><b class = 'user'>Nathan Peterson</b> reacted to your recent post <b>5 end-game strategies to increase your win rate</b></p>
<small>2 weeks ago</small>
</div>
</div>
</section>