div making inner div's one below another-CodePudding

.right {
  display: flex;
  background-color: yellowgreen;
}

.left {
  display: flex;
  background-color: yellow;
}

.container {
  display: flex;
  background-color: brown;
  justify-content: space-between;
}

<div >
  <div >
    <div >right</div>
    <div >left</div>
  </div>
</div>

If I remove div with class name "temp" then the right and left div appear at right and left corner of the screen.

But if I keep the div "temp" then the right and left div appear one below another.'

keeping div temp

removing div temp

CodePudding user response：

.container{
   display: flex;
   background-color: brown;
   justify-content: space-between;
   flex-direction: column;
}

Right div and Left div Come in Onebelow another. Like Column. Try this it will work

CodePudding user response：

This is how you should do it!

.container{
    display:flex;
    background-color: brown;
    flex-direction: row;
    justify-content: space-between;
}
.container div {width:100px; height:100px;}
.left{background-color: yellow;}
.right{background-color: yellowgreen;}

<div >
   <div >left</div>
   <div >right</div>
</div>

CodePudding user response：

Just give flex to .temp not .container.

.right {
  background-color: yellowgreen;
}

.left {
  background-color: yellow;
}

.temp{
  display: flex;
  background-color: brown;
  justify-content: space-between;
}

<div >
  <div >
    <div >right</div>
    <div >left</div>
  </div>
</div>