Responsive Layout with React (previously called: Left / Right Section Component)

[klequis]

Description

• Create a component that represents a section on a page.

• The component will have a left and right side

• One side will display an image and is 33% of the page width

• The other side will display children which are expected to be text and is 66% of the page width.

• The image must always be centered in its container and must not get cropped, nor distort in any way

• The component will take a parameter which will specify

  1. the image is on the left and the text on the right OR
  2. the image is on the right and the text in on the left

• The component will take a parameter which specifies which image to use

• Use the starter project

• use square.png & wide-rectangle.png

UI

On mobile

On desktop

[klequis]

Once you are done

Checkout out the project in the possible-answers folder

1. In what way could the ui presented by the component be improved?
2. How can your code be improved?
3. Do you have suggestions for the example in the possible-answers folder?