Here is a scenario where the HTML and CSS (specifically the .type-a section) utilize CSS Grid.
(Click here to view the CodePen example)
The goal is to ensure that all elements with the .col1 class are aligned correctly in the first column, while having the .col2 span across the entire rows.
Unfortunately, modifying the HTML structure is not an option in this case (even though it would solve the issue easily).
We need to find a solution that can handle varying numbers of rows for the .col1 elements without creating an excessive amount of rows like depicted in .type-b.
.container {
display: grid;
grid-auto-columns: 50%;
grid-auto-flow: dense;
/* Styling */
color: #ffffff;
text-align: center;
}
.col1 {
grid-column: 1;
}
.col2 {
grid-column: 2;
}
// Type B
.type-b>.col2 {
grid-row: 1 / 100;
}
// Additional Styles
.divider {
height: 1px;
background: #B0BEC5;
margin: 30px;
}
.content-a {
background: #5C6BC0;
}
.content-b {
background: #7E57C2;
}
.content-c {
background: #AB47BC;
}
.content-d {
background: #FFA726;
}<h3>Type A</h3>
<div class="container type-a">
<div class="col1 content-a">Content A</div>
<div class="col1 content-b">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac auctor erat. Phasellus porta nec dolor ut egestas. Praesent pretium elit vel risus iaculis, vel condimentum lorem volutpat. Nunc placerat massa ac venenatis dictum. Donec ullamcorper, magna
efficitur laoreet euismod, arcu neque aliquam purus, sed ornare dolor sem sed est.
</div>
<div class="col1 content-c">Content C</div>
<div class="col2 content-d">
<img src="https://picsum.photos/200/300">
</div>
</div>
<div class="divider"></div>
<h3>Type B (Desired Outcome)</h3>
<div class="container type-b">
<div class="col1 content-a">Content A</div>
<div class="col1 content-b">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac auctor erat. Phasellus porta nec dolor ut egestas. Praesent pretium elit vel risus iaculis, vel condimentum lorem volutpat. Nunc placerat massa ac venenatis dictum. Donec ullamcorper, magna
efficitur laoreet euismod, arcu neque aliquam purus, sed ornare dolor sem sed est.
</div>
<div class="col1 content-c">Content C</div>
<div class="col2 content-d">
<img src="https://picsum.photos/200/300">
</div>
</div>