How to display two components next to each other?

How can I display two components next to each other in React Studio?
Do I need CSS for that?
Something like this: .displayInRow{display:flex; flex-direction:row;}

… or is there another way?

I assume you are asking about the two elements that are in Scroll Flow (because elements in Foreground and Background can easily be positioned anywhere, even off-screen).

It is easy, just take the element(s) that that you want to have in line and uncheck the “Contributes to flow” setting on all of them except the last one.

Hi Adam,
I meant so that they line up in one row by themselves with dynamic width. If the width is dynamic you can’t position them because you don’t know where they start and end in horizontal position.

I am not sure if it would accomplish what you are trying to do but usually when I am trying to something like that, I use key lines.

You can get even more sophisticated effects by using keylines inside of containers, and then position the containers using more key lines (or align edges by %)


1 Like

I’d also check the columns element for aligning components side by side.

1 Like