SurgicalTools | 3D printed surgical tools | Development Tools library

HTML

I think you can accomplish what you are looking for by adding some media queries and adjusting the width and height of the images and icons. I edited your code for a 320px screen, but you can also add one for 768px screens, etc. I also targeted your bigger images more specifically as just using img in your CSS rule, those properties were also affecting your icon images at times.

It is because you have each row displaying as a flexbox.

The column on the right has a larger top margin than the one on the right causing the flexbox to grow to be taller than the height of the image and blue tag.

Because the blue tab is positioned absolutely at the far bottom of the container this causes them to split.

If you remove the bottom: 0; from the blue tag and change the img to display: block; (removes the gap between the two elements) then this will cause it to behave better.

Edit: I actually found another solution to the issue itself here: Prevent a flex items height from expanding to match other flex items

If you add height: 0%; to the flexbox content (.column1) then it will cause it to magically work with no other changes, keeping position: absolute; and bottom: 0;.