How do I have left and right sides with different background colors of equal lengths?

I want 2 sides - left and right - of different background colors.
Each side is a group.

The problem is the height of the content in each group is variable.
Sometimes the left side is longer, sometimes the right side is longer.

This is what I get when the left side’s content comes up shorter:

This is what I get when the right side’s content comes up shorter:

This is what i want - the colors should fill up each side and be of equal length (the longer length of either side’s content):

Hope i’m making sense here…

Looks like you are using 1 element on the left and the background on the right.

You need to either use 2 elements, or use an image.

Hey, I’ve edited my images to make it clearer.

I am using 2 elements - one on each side.

Perhaps a repeating background image might work. But it wont be responsive - it will fail on mobile - so the image needs to change on mobile (maybe). On mobile, the red section should stack on top of the blue section.

This topic was automatically closed after 70 days. New replies are no longer allowed.