I'm currently attempting to design a layout with two columns, displaying only two items per row. I came across a solution on StackOverflow that aligns child elements of different blocks, but unfortunately, it doesn't apply to my HTML structure.
My HTML structure is as follows:
<div class="twoLayout">
<div class="LeftColumn">
<div class="childItem"></div>
<div class="childItem"></div>
<div class="childItem"></div>
<div class="childItem"></div>
</div>
<div class="RightColumn">
<div class="childItem"></div>
<div class="childItem"></div>
<div class="childItem"></div>
<div class="childItem"></div>
</div>
</div>
My question pertains to using CSS Grid or Flexbox with this HTML structure in order to ensure each childItem in the LeftColumn aligns perfectly with each childItem in the RightColumn on the same row.
The issue I'm encountering is that due to varying content lengths in some childItems, the alignments are getting disrupted. This is how it looks at the moment: https://i.sstatic.net/72e3s.png
However, my desired outcome is for the childItems from both the Left and Right columns to be aligned on the same row like this: https://i.sstatic.net/1zQFg.png
I understand that without the LeftColumn or RightColumn divs, I could easily resolve the alignment issue using CSS Grid or Flexbox.
If altering the HTML isn't an option, can CSS Grid or Flexbox still be utilized, or is there another technique available to achieve proper alignment between the child item in the left column and the child item in the right column?