Responsive buttons in react js render

Question

I have a custon class inside my react js render , it's a style to make 3 buttons inline (2 on the right and one to the left) in the same line.

But the buttons are not responsive to mobile and other screens, I tried to put the style in a custom css stylesheet but it didn't work and the buttons didn't show up inline.

Here is my CodeSandBox.

Many thanks

Answer 1

Please check with the property flex-wrap: wrap on parentStyle. This will make the prev and next buttons move to the next line as you resize. Similarly you can use the same property in this line <div style={{ ...childStyle, justifyContent: "flex-end" }}> as well to move the next button below the prev button if the browser is resized further

Answer 2

Please take a look at this, I want to put each button in new line in this case :

Small screen test

Answer 3

They seem to line up - what is the problem?