Keeping an image horizontally aligned with another image. Flexbox I don't think is the answer. I think I need some sort of scss calc()

Question

I'm trying to align horizontally two images that are next to each other with different dynamic text under it. If you review the image I attached it's pretty clear what I'm trying to do. I don't think flexbox properties like flex-end or flex justify-content: space-between will work here. Thanks for your help in advance.

https://i.stack.imgur.com/QYCMh.jpg enter image description here

Checkout the answer here: https://stackoverflow.com/questions/36568572/flexbox-vertically-split-container-in-half — Nathaniel Flick, Nov 22 '19 at 02:31
I have tried to do this to the left column. display: flex; flex-direction: column; justify-content: space-between; but because there is text underneath it aligns with the text. — MikeyNOob, Nov 22 '19 at 02:58
Please include your code-- without it, it will be difficult for anyone to provide you with helpful direction. — Alexander Nied, Nov 22 '19 at 03:07

score 0 · Answer 1 · answered Nov 22 '19 at 08:20

So I figured out a solution. I used calc() to achieve the results

position: absolute;
width: calc(100% - 50px);
margin-top: calc(112.1% - 980px / 25);

This calc keeps the image stuck to the image next to it. Not sure what the unit numbers mean, I basically fiddled with the units until I got the results I wanted.

Heres the result https://gifyu.com/image/vnPX

Keeping an image horizontally aligned with another image. Flexbox I don't think is the answer. I think I need some sort of scss calc()

1 Answers1