How can I properly align images in the 'pairs well with' section?

[hellocc]

Hi,

I've been trying to align the images of the complimentary products (the "pairs well with" section) on my product page and I can't seem to get it right.

The images were originally stack in a column (with the titles on the side) and I would like the images to be one next to each other, in a row,  with the titles below them. I tried to move things around but for some reason I can't get them the same size and one seems to be always higher than the other. Any ideas?  Thank you! 

http://ad6568.myshopify.com

This is the code I used:

.complementary-products__grid {
display: flex;
flex-direction: row;
justify-content: space-between;

}

.complementary-product {
display: flex;
flex-direction: column;
align-items: center;
}

.complementary-products {
--slide-item-outer-gap: 0;
--slide-item-inner-gap: 0;
--slide-item-padding: 0;

[David_SHT]

Hi @hellocc 

This is David at SalesHunterThemes.

Thank you for your question. 

Please share your store URL, page URL and also password (if your store has one) so we can help you.

[hellocc]

Hi David,

Here's the link to the site http://ad6568.myshopify.com

PW: tomato123

Thank you so much!

[David_SHT]

Hi @hellocc 
Didn't see any field to add the password

[hellocc]

Aah sorry about that... You can see it now.