Image alignment with responsive sizes and fixed px margins - css

Question

I'm working on a site where I have been given very strict spacing requirements. One of these is that there should be 30px margin between all images. The images themselves can be responsive but the margin must remain the same.
The problem I have run into is depicted below. Essentially I have two columns side by side. In one there are two square images with a 30px gap in the middle. In the other is a single tall image with a height equivalent to 2X the height of a square image + 30px (to account for the margin between the two squares).
On a large screen when the images are their full size this displays correctly, however on smaller screens the images shrink. As a result of this the + 30px included in the tall image size to match the margin between the squares is reduced. However the margin between images remains at 30px, this results in a gap at the bottom putting the images out of alignment.
What elegant solutions have people used for this issue before? I am sure it is a straight forward issue yet the only solutions I have found are convoluted and messy.
Tech-wise I'm working with the grid from bootstrap 3, and Styled Components.

Answer 1

So I've found a reasonably satisfactory solution, that keeps the images perfectly aligned and preserves the margin regardless of screen size. However, a drawback of this method is that the image is not centrally aligned within the containing <TallImage> div, meaning the true centre of the image is shifted to the right.
I'm going to leave the question open as I'd welcome seeing whatever other solutions anyone can come up with. But for someone that is looking, my solution is below.
import styled from 'styled-components';
const TallImage = styled.div`
height: 0;
margin: 0 0 30px;
overflow: hidden;
padding-top: calc(200% + 30px);
position: relative;
width: 100%;
img {
height: 100%;
position: absolute;
top: 0;
width: auto;
}
`;
<div className="row">
<div className="col-sm-6">
<SquareImage>
<img src="..." alt="..." />
</SquareImage>
<SquareImage>
<img src="..." alt="..." />
</SquareImage>
</div>
<div className="col-sm-6">
<TallImage>
<img src="..." alt="..." />
</TallImage>
</div>
</div>