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

[jayy]

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…

[nfisher]

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.

[jayy]

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.