Consistent distances between two elements in a grid

*Sorry for the new thread, I couldn't add new images to the old OP. ------------ So I'm trying to make one element in a grid start a consistent distance from another. For example in the images with the snowboarder I'd like the blue background to cut through the image about halfway up (image 1) The problem comes when the grid expands vertically for larger screen sizes. As the grid expands, each row expands, and if both elements don't start in the same grid row, the distance between them increases. (image 1 to image 2) Codepen: How it currently behaves: https://codepen.io/nwoodward/pen/zYXqKeZ How it should behave when resizing vertically: https://codepen.io/nwoodward/pen/bGJpwZP?editors=1010 Is this even possible? Or should I look to have both start in the same row and then translate one of them? Thanks