JSFiddle - React, Tailwind, and code Playground

by OmShiv

HTML

<div class="parent one">
  <div class="first">
    1
  </div>
  <div class="second">
    2
  </div>
</div>

<div class="parent two">
  <div class="first">
    3
  </div>
  <div class="second">
    4
  </div>
</div>

<div class="parent three">
  <div class="first">
    5 
  </div>
  <div class="second">
    6
  </div>
</div>

CSS

.first, .second {
    padding: 1em;
    text-align: center;
    border-radius: 2px;
    border: 1px solid #82BBD6;
}
.first {
    background-color: #B6F8E0;
}
.second {
    background-color: #EDFFA3;
}

/* Method 1 */
.parent.one {
  display: flex;
  flex-flow: column-reverse;
}

/* Method 2 */
.parent.two   { display: table; }
.parent.two .first  { display: table-footer-group; }
.parent.two .second { display: table-header-group; }

/* Method 3 */
.parent.three .first  { float: right; clear: left; }
.parent.three .second { float: left; clear: left; }

body { padding: 2em; }

.parent {
    margin-bottom: 2em;
}