2 containers aligned vertically in horizontal line with the other 2 containers-CodePudding

Okay so I want to put 2 vertical containers in horizontal line with other 2 containers in css and want to make it responsive. This is a visual example what I want to do:

Can somebody put an example how to solve this problem?

CodePudding user response：

An example using flex.

.top,
.bottom,
.middle,
.right {
  background-color: #3a3b3c;
  border-radius: 5px;
}

.wrapper {
  display: flex;
}

.left {
  display: flex;
  flex-direction: column;
}

.top {
  height: 200px;
}

.bottom {
  height: 100px;
  margin-top: 10px;
}

.left, 
.middle,
.right {
  width: calc(100%/3);
  margin: 0 10px;
}

<div >
  <div >
    <div ></div>
    <div ></div>
  </div>
  <div ></div>
  <div ></div>
</div>