JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div id="box-wrapper">
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
    <div>f</div>
  </div>

CSS

#box-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#box-wrapper > div {
  border: 1px solid black;
  width:30%;
}


/* a */
#box-wrapper > div:nth-child(1) {
  order: 0;
}

/* d */
#box-wrapper > div:nth-child(4) {
  order: 1;
  align-self: flex-end;
}

/* b */
#box-wrapper > div:nth-child(2) {
  order: 2;
}

/* e */
#box-wrapper > div:nth-child(5) {
  order: 3;
}

/* c */
#box-wrapper > div:nth-child(3) {
  order: 4;
}

/* e */
#box-wrapper > div:nth-child(6) {
  order: 5;
}