Why does the box move down inside of a box?-CodePudding

The colors are intended for orientation. If you enter this code like this, there should be a big red box on the left and a blue one on the right. In the red box there is a small yellow box on the left and a purple box on the right below it. I want the purple box to be the same height as the yellow one.

.centerbox {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.left {
  width: 64%;
  background-color: red;
  justify-content: space-between;
}

.right {
  width: 34%;
  background-color: blue;
}

.megadiv {
  max-width: 1200px;
  margin: auto;
  text-align: center;
  align-items: center;
}

.insideleft {
  width: 20%;
  background-color: yellow;
}

.insideright {
  width: 80%;
  background-color: purple;
  float: right;
}

<div >
  <div >
    <div >
      <div >
        wadawd
      </div>
      <div >
        awdwad
      </div>
    </div>
    <div >
      awdwaawd
    </div>
  </div>
</div>

CodePudding user response：

If you add display flex or contents in your CSS for .left class your yellow and purple boxes would be in the same row.

.left{
display: contents;
}

CodePudding user response：

Servus ChoosenOne! In your code you mixed something. I clean a little bit up.

.centerbox {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.left, .right {
  height:30px;
}

.left {
  width: 64%;
  display: flex;
  background-color: red;
  justify-content: space-between;
}

.right {
  width: 34%;
  background-color: blue;
}

.megadiv {
  max-width: 1200px;
  margin: auto;
  text-align: center;  
}

.insideleft {
  width: 20%;
  background-color: yellow;
}

.insideright {
  width: 80%;
  background-color: purple;  
}

<div >
  <div >
    <div >
      <div >
        wadawd
      </div>
      <div >
        awdwad
      </div>
    </div>
    <div >
      awdwaawd
    </div>
  </div>
</div>