<div class="flex-container">
  <div class="flex-item flex-item-1">1</div>
  <div class="flex-item flex-item-2">2</div>
  <div class="flex-item flex-item-3">3</div>
  <div class="flex-item flex-item-4">4</div>
</div>

/* PARENT ELEMENT */

/* Toggle the display to see the effect of flex  */
/* Play around with the width to see how flex behaves */

.flex-container {
  background-color: black;
  border: 5px solid purple;
  display: flex;
}

/* CHILDREN ELEMENTS */
.flex-item {
  color: #eee;
  font-weight: bold;
  font-size: 4rem;
  margin: 2px;
  text-align: center;
}

.flex-item-1,
.flex-item-3 {
  width: 20%;
  height: 100px;
}

.flex-item-2,
.flex-item-4 {
  width: 90%;
  height: 300px;
}

.flex-item-1 {
  background-color: red;
}

.flex-item-2 {
  background-color: blue;
}

.flex-item-3 {
  background-color: yellow;
}

.flex-item-4 {
  background-color: green;
}