I am trying to create a layout with two columns and two rows. The first row should have text in the first column and an image in the second column, while the second row should have an image in the first column and text in the second.
My goal is to make the corners of the images touch to form a perfect grid. Despite my efforts, I can't seem to get them to align properly no matter what adjustments I make.
If you want to take a look at the code: https://jsfiddle.net/zbqewcrx/
<body>
<div>
<div class="block reverse">
<div class="block-info left">
<div class="block-info-content">
<div class="block-title">
<h2>Title 1</h2>
</div>
<div class="block-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis tempus nibh. Sed eget lacinia lorem. Integer imperdiet sodales bibendum. Donec fermentum viverra orci, at scelerisque erat commodo sit amet. Nullam et blandit massa. Quisque gravida consectetur tristique. Sed eget tempor ante. Aliquam aliquet dolor porta suscipit elementum. Ut vel fringilla lacus.</p>
</div>
</div>
</div>
<div class="block-photo">
<div class="block-img first">
<img src="https://images.unsplash.com/photo-1607028227034-f0378aa1bd2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80">
</div>
</div>
</div>
<div class="block">
<div class="block-photo">
<div class="block-img">
<img src="https://images.unsplash.com/photo-1607028227034-f0378aa1bd2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80">
</div>
</div>
<div class="block-info right">
<div class="block-info-content">
<div class="block-title">
<h2>Title 2</h2>
</div>
<div class="block-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis tempus nibh. Sed eget lacinia lorem. Integer imperdiet sodales bibendum. Donec fermentum viverra orci, at scelerisque erat commodo sit amet. Nullam et blandit massa. Quisque gravida consectetur tristique. Sed eget tempor ante. Aliquam aliquet dolor porta suscipit elementum. Ut vel fringilla lacus.</p>
</div>
</div>
</div>
</div>
</div>
</body>
<style>
body {
margin: 0 20em;
}
h2, h3, h1, h4, p {
margin: 10px 0;
padding: 0;
}
.block {
line-height: 24px;
display: flex;
flex-direction: row;
align-items: center;
text-align: left;
}
.block-info, .block-photo {
width: 50%;
}
.block-img img {
width: 100%;
height: 600px;
object-fit: cover;
}
.block-info-content {
text-align: left;
padding: 2em;
}
.block-text {
padding-top: 2em;
}
</style>
screenshot showing how the corners of the images are not aligned
No matter what I try, the corners of the images never align perfectly on my website. It's frustrating because they're always just slightly off :(
I attempted to remove padding (in classes .left, .right) which improved the alignment slightly, but it's still not meeting my expectations.