Facing Issue on doing div component side by side in React

Question

`The problem is , i want to do two components side by side . i'm using bootstrap not react bootstrap, i'm trying to do side by side as shown in image, but listgroup is coming sown of address form

I tried it by css but it could not work for me , so i'm expecting listgroup to right of my address form.

Here is my code images. `

Answer 1

Here's what you can do to place components side by side in a page.

Suppose you have two components <Form/> and <ListGroup/>. You should create a parent container and make it a flex container. Then wrap the components inside a <div/>. Code below:

<div style={{display: "flex", justifyContent: "space-between"}}>
   <div> 
      <Form /> 
   </div> 
   <div> 
      <ListGroup/> 
   </div> 
</div>

You can also give flexBasis: some value in percentage to the children <div> above to say how much screen width each component should occupy.

Update: (using flexBasis)

<div style={{display: "flex", flexDirection: "row"}}>
   <div style={{flexBasis: "50%"}}> 
      <Form /> 
   </div> 
   <div style={{flexBasis: "50%"}}> 
      <ListGroup/> 
   </div> 
</div>

Answer 2

Enclose them in one div and use flex for that

Answer 3

I think this is happening because of using multiple div, using one div, and using the flex command or checking if this happening for import error.