Consider restructuring the layout and utilizing semantic tags for better organization.
In your design, you have 3 columns that can be aligned side by side using Flexbox.
A more semantically correct approach would involve using aside as containers for the image, date, and "read more" sections. The main column containing your blog post should be wrapped in an article tag.
You can make the article element expand to fill the available space by applying flex-grow: 1 to it.
To achieve your desired layout with the date and "read more" columns, utilize flexbox with flex-direction: column. This allows you to use margin-top: auto on the "read more" link to position it at the bottom.
Note: Avoid using margins to separate columns within a flexbox container; opt for gap instead!
section.blog-post {
display: flex;
gap: 1.25em;
background-color: white;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
max-width: 1200px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-align: left;
aside.blog-thumbnail img {
width: 150px;
height: 150px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
object-fit: cover;
}
article {
flex-grow: 1;
h2 {
font-size: 1.2em;
margin-bottom: 20px;
color: #333;
margin-top: 0;
}
p {
font-size: 1em;
color: #666;
margin-bottom: 100px;
}
}
aside.blog-date {
display: flex;
flex-direction: column;
time {
color: #666;
}
a {
color: #1e7cd6;
text-decoration: none;
font-weight: bold;
margin-top: auto;
}
}
}
<main class="blog-container" id="blogContainer">
<!-- Example Blog Post -->
<section class="blog-post" data-date="2024-08-30" onclick="';" style="cursor: pointer;">
<aside class="blog-thumbnail">
<img src="https://d150u0abw3r906.cloudfront.net/wp-content/uploads/2021/09/aerial-shot.jpg" alt="Thumbnail" />
</aside>
<article>
<h2>How Drone Photography Can Elevate Your Real Estate Listings</h2>
<p>Unlock the Power of Aerial Views & Attract More Buyers to Your Listings</p>
</article>
<aside class="blog-date">
<time datetime="2024-08-30">August 30, 2024</time>
<a href="">Read more</a>
</aside>
</section>
</main>