Box align flex

by SJ_KIllshot

HTML

<div class="d-flex flex-row">
  <div class="d-flex flex-column mr-1">
    <div class="big-box">
      BOX 1
    </div>
    <div class="big-box">
      BOX 2
    </div>
    <div class="big-box">
      BOX 3
    </div>
    <div class="big-box">
      BOX 4
    </div>
  </div>
  <div class="d-flex flex-column">
    <div class="small-box">
      BOX 5
    </div>
    <div class="small-box">
      BOX 6
    </div>
  </div>
</div>

CSS

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
  align-items: center;
}

.big-box {
  background-color: green;
  width: 400px;
  height: 100px;
  margin: 2px 0;
  padding: 10px;
}

.small-box {
  background-color: orange;
  width: 300px;
  height: 100px;
  margin: 2px 0;
  padding: 10px;
}

.mr-1 {
  margin-right: .5rem;
}