css - Positioning inline-flex elements inside div

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?

question from:https://stackoverflow.com/questions/65860447/positioning-inline-flex-elements-inside-div

Answer 1

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.