I am working on a layout where I have some text on the left side and an image on the right side. Below them, I have three smaller images. I want to align the left text and the right image so that they both vertically align with the bottom images.
Here is my current layout:
As you can see in the image:
• The text on the left is higher than the bottom images.
• The large image on the right is also higher than the bottom images.
What I want to achieve:
• I want the text on the left to be vertically aligned with the bottom images.
• I also want the large image on the right to be vertically aligned with the bottom images.
• The gap between the text and the image should be exactly 160px.
I’ve tried adjusting the margins and padding, but I haven’t been able to get the alignment correct. What would be the best approach in CSS to achieve this alignment?
I’ve created a Fiddle to demonstrate the issue: https://jsfiddle.net/fptL74bx/I think the necessary adjustments need to be made in the following section of the CSS code in fiddle.
.intro { display: flex; padding-top: 160px; justify-content: center;