JSFiddle - React, Tailwind, and code Playground

by mtrantalainen

HTML

<!doctype html>
<html>
<head>
<style>
</style>
</head>
<body>
<main>
  <article>A</article>
  <article>B</article>
  <article>C</article>
  <article>D</article>
  <article>E</article>
  <article>F</article>
  <article>G</article>
  <article>H</article>
  <article>I</article>
  <article>J</article>
  <aside>Tall content<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x</aside>
</main>
</body>
</html>

CSS

main
{
  display: grid;
  grid-template-columns: 1fr 15rem;
  grid-auto-rows: auto auto;
  gap: 1rem;
}

article
{

  grid-template-columns: 200px 200px 200px;
}

aside
{
  grid-column: 2;
  grid-row: 1 / -1;
}

main > *
{
  color: #fff;
  background: #777;
  padding: 1rem;
  border-radius: 0.5rem;
}