I'm currently working on a blog template project that resembles the design of this particular page
However, I've encountered an issue with aligning the grids in a way that meets my requirements. To showcase my problem, I have shared my version on this fiddle link https://jsfiddle.net/f74d0ngr/9/. (Please resize the output window to identify the alignment issue.)
My goal is to ensure that the latest - 2 and latest -3 posts are positioned directly under the latest -1 post.
Here is a snippet of my code:
<div id="Blog-body">
<div class="container">
<div class="row">
<div class="col-lg-8">
<p class="text-center section-head" id="The-Latest">The Latest</p>
<img src="img/Blog1.png" alt="" class="blog-img">>
<p class="lead less-spacing">Blog | Lorem Ipsum</p>
<h3 class="title">Inviting Algorithms to the Design Team</h3>
</div>
<div class="col-lg-4">
<p class="text-center section-head" id="The-Latest">Most Read</p>
<p class="lead less-spacing">Blog | Lorem Ipsum</p>
<h3 class="">The Best Managers Understand Their Employees’ Emotions—And Their Own</h3>
<p class="lead less-spacing">Blog | Lorem Ipsum</p>
<h3 class="">The Best Managers Understand Their Employees’ Emotions—And Their Own</h3>
<p class="lead less-spacing">Blog | Lorem Ipsum</p>
<h3 class="">The Best Managers Understand Their Employees’ Emotions—And Their Own</h3>
<p class="lead less-spacing">Blog | Lorem Ipsum</p>
<h3 class="">The Best Managers Understand Their Employees’ Emotions—And Their Own</h3>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<p class="text-center section-head" id="The-Latest">The Latest</p>
<img src="img/Blog1.png" alt="" class="blog-img">>
<p class="lead less-spacing">Blog | Lorem Ipsum</p>
<h3 class="title">Inviting Algorithms to the Design Team</h3>
</div>
<div class="col-lg-4">
<p class="text-center section-head" id="The-Latest">The Latest</p>
<img src="img/Blog1.png" alt="" class="blog-img">>
<p class="lead less-spacing">Blog | Lorem Ipsum</p>
<h3 class="title">Inviting Algorithms to the Design Team</h3>
</div>
</div>
</div>
</div>
CSS
.section-head{
background-color: #fbef39;
height: 50px;
text-align: center;
vertical-align: middle;
line-height: 50px;
}
I've attempted placing the sections in different rows without success in achieving the desired alignment. Any suggestions or solutions to resolve this issue would be greatly appreciated.