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


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?


An example using flex.

.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;

.right {
  width: calc(100%/3);
  margin: 0 10px;
<div class="wrapper">
  <div class="left">
    <div class="top"></div>
    <div class="bottom"></div>
  <div class="middle"></div>
  <div class="right"></div>

Answered By – Kameron

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.