Question: I'm trying to get two separate elements side by side inside one div but second one should be right side of div

```
<div className={classes.container}>
   <div className={classes.first}>
       First
   </div>
   <div className={classes.second}>
       Second
   </div>
<div>

```

I tried to give both `display: "inline-flex"` which sets them side by side. Then I tried to move second div to right side of container div with `flex: 1`, but second div didn't move anywhere. Then tried also give container div `justifyContent: "space-between"` and that didn't do anything either. So problem is how to set second div to right side of container div.

```
container: {
   justifyContent: "space-between"
},
first: {
   display: "inline-flex",
   flex: 1,
},
second: {
   display: "inline-flex"
},

```

Any ideas how to move second div to right side of container div?

Answer: 
need to use `display:'flex'` in the `container` class. `justify-content` works on the flex display.

```
container:{
  display:'flex'
}

```

And then the `first` and `second` divs will take the required space/width and will be placed side by side.  

For placing them apart use `justifyContent:'space-between'` or for equal spacing use `justifyContent:'space-around'` in the `container` class. Also, you can give the `first` and `second` divs width individually.

[![Edit loving-tree-p9fs2](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/loving-tree-p9fs2?fontsize=14&hidenavigation=1&theme=dark)
```
container: {
   justifyContent: "space-between",
    display: "flex"
},
first: {
   display: "inline-flex",
   flex: 1,
},
second: {
   display: "inline-flex"
},

```