JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<ol>
  <li class="span-8"></li>
  <li class="span-4"></li>
  <li class="span-4"></li>
  <li class="span-4 right"></li>
  <li class="span-4 right"></li>
</ol>

CSS

* {
  margin: 0;
  padding: 0;
}
ol {
  display: grid;
  list-style: none;
  grid-template-areas: "left right";
  grid-template-columns: repeat(8, 1fr) repeat(4, 1fr);
  grid-gap: 10px;
  counter-reset: num;
}

li {
  display: block;
  background-color: lightblue;
  min-height: 200px;
  counter-increment: num;
}

li:before {
  content: counter(num);
}

.span-8 {
  grid-column: span 8;
}
.span-4 {
  grid-column: span 4;
}

.right {
  grid-area: right;
}