React：以不同的方式渲染组件

Question

I have two components which should appear in the following way:-

Now the problem statement is, i have to render component B first & then component A. But component A should be displayed on left while B on right. One can use any CSS or bootstrap to display/arrange the component.

Note: component A returns rectangle and component B returns circle / ellipse.

Answer 1

A pure css solution: you can use display: grid; and order: 1; and order: 2; to rearrange order.
I made a quick codepen to demonstrate.

Or if you are not allowed to use container - something as simple as this might work: just give component B negative margin-left and component A positive margin-left. https://codepen.io/anon/pen/LddwYa