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

Issue

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:
enter image description here

Can somebody put an example how to solve this problem?

Solution

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 class="wrapper">
  <div class="left">
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

Answered By – Kameron

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.