JSFiddle - React, Tailwind, and code Playground

by kmouse

HTML

<div id="test">
    <p id="col1-row3">1-3</p>
    <p id="col1-row2">1-2</p>
    <p id="col1-row1">1-1</p>
    <p id="col2-row2">2-2</p>
    <p id="col2-row1">2-1</p>
    <p id="col3-row1">3-1</p>
  </div>

CSS

* {
      margin: 0;
      padding: 0;
      font-size: 100%;
      line-height: 1;
    }

    #test {
      display: flex;
      flex-direction: column-reverse;
      flex-wrap: wrap;
      height: 300px;
    }

    p {
      margin-top: 10px;
      margin-right: 10px;
      background-color: #ccc;
    }

    #col1-row1 {
      height: 90px;
    }

    #col1-row2 {
      height: 90px;
    }

    #col1-row3 {
      height: 90px;
    }

    #col2-row1 {
      height: 140px;
    }

    #col2-row2 {
      height: 140px;
    }

    #col3-row1 {
      height: 290px;
    }