<div class="row">
  <div class="col col-25">
    <div class="block yellow"></div>
  </div>
  <div class="col col-25">
    <div class="block green"></div>
  </div>
  <div class="col col-50">
    <div class="block red"></div>
  </div>
</div>

<div class="row">
  <div class="col col-50">
    <div class="block red"></div>
  </div>
  <div class="col col-25">
    <div class="block yellow"></div>
  </div>
  <div class="col col-25">
    <div class="block green"></div>
  </div>
</div>

/* -- columns -- */
.row {
  display: flex;
  flex-direction: row;
}

.col {
  padding: 0.5rem;
  box-sizing: border-box;

  /* debug border */
  outline: 1px dashed crimson;
}

.col-25 {
  width: 25%;
}

.col-50 {
  width: 50%;
}

/* -- blocks -- */
.green {
  background-color: #57d9b7;
}

.yellow {
  background-color: gold;
}

.red {
  background-color: crimson;
}

.block {
  height: 120px;
  width: 100%;
  border-radius: 10px;
}