JSFiddle - React, Tailwind, and code Playground

by Aziz Natour

HTML

<div class="flex">
  <div class="child" style="height: 100px;">1</div>
  <div class="child" style="height: 200px;">2</div>
  <div class="child" style="height: 600px;">3</div>
  <div class="child" style="height: 400px;">4</div>
</div>

CSS

body {
  background: lightblue;
}

.flex {
  display: flex;
  flex-direction: column;
  padding: 1em;
  border:1px solid #000;
  position: relative;
}

.flex .child {
  font-size: 3em;
  padding: 0.1em;
  border: 1px solid #000;
  margin-bottom: .5em;
  box-sizing: border-box;
}

@media (min-width: 600px) {
  .flex {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .flex .child {
    width: 33.33%;
    margin-right: 66.66%;
  }
  .flex .child:nth-of-type(3) {
    width: 62.66%;
    position: absolute;
    top: 2%; right: 2%;
    margin-right: 0;
  }
}