JSFiddle - React, Tailwind, and code Playground

by Kriem

HTML

<section>
  <article class="col-4">
    <h1>1 Lorem ipsum dolor sit amt.</h1>
    <p>Consectetur adipisicing elit. Eos, laborum, atque! Assumenda dolores, nam unde cum eius harum voluptate distinctio itaque nesciunt inventore eveniet dolorum dolore, deserunt, possimus perferendis placeat</p>
  </article>
  <article class="col-4" id="article-2">
    <h1>2 Lorem ipsum dolor sit amt.</h1>
    <p>Consecteat</p>
  </article>
  <article class="col-4">
    <h1>3 Lorem ipsum dolor sit amt.</h1>
    <p>Consectetur adipisicing elit. Consectetur adipisicing elit. Eos, laborum, atque! Assumenda dolores, deserunt, possimus perferendis placeatEos, laborum, atConsectetur adipisicing elit. Eos, laborum, atque! Assumenda dolores, deserunt, possimus perferendis placeatque! Assumenda dolores, deserunt, possimus perferendis placeatConsectetur adipisicing elit. Eos, laborum, atque! Assumenda dolores, deserunt, possimus perferendis placeat</p>
  </article>
  <article class="col-8">
    <h1>4 Lorem ipsum dolor sit amt.</h1>
    <p>Consectetur adipisicing elit. Eos, laborum, atque! Assumenda dolores, nam unde cum eius harum voluptate distinctio itaque nesciunt inventore eveniet dolorum dolore, deserunt, possimus perferendis placeat</p>
  </article>
  <article class="col-4">
    <h1>5 Lorem ipsum dolor sit amt.</h1>
    <p>Consectetur adipisicing elit. Eos, laborum, atque! Assumenda dolores, nam unde cum eius harum voluptate distinctio itaque nesciunt inventore eveniet dolorum dolore, deserunt, possimus perferendis placeat</p>
  </article>
  <article class="col-4">
    <h1>6 Lorem ipsum dolor sit amt.</h1>
    <p>Consectetur adipisicing elit. Eos, laborum, atque! Assumenda dolores, nam unde cum eius harum voluptate distinctio itaque nesciunt inventore eveniet dolorum dolore, deserunt, possimus perferendis placeat</p>
  </article>
  <article class="col-4">
    <h1>7 Lorem ipsum dolor sit amt.</h1>
    <p>Consectetur adipisicing elit. Eos, laborum, atque! Assumenda dolores, nam unde cum...

SCSS

* { box-sizing: border-box; }
section { display: block; margin: 0 auto; max-width: 900px; background: hotpink; font-size: 0; }
article { display: inline-block; border: 1px dashed red; margin 0; padding:0.25rem; vertical-align:top; background:white; }
h1, p { margin: 0; padding: 0; }
h1 { font-size: 1.25rem; }
p { font-size: 1rem; }

.col-1 {width: calc(100% * 1/12)};
.col-2 {width: calc(100% * 2/12)};
.col-3 {width: calc(100% * 3/12)};
.col-4 {width: calc(100% * 4/12)};
.col-5 {width: calc(100% * 5/12)};
.col-6 {width: calc(100% * 6/12)};
.col-7 {width: calc(100% * 7/12)};
.col-8 {width: calc(100% * 8/12)};
.col-9 {width: calc(100% * 9/12)};
.col-10 {width: calc(100% * 10/12)};
.col-11 {width: calc(100% * 11/12)};
.col-12 {width: calc(100% * 12/12)};

#article-2 { min-height: 300px; }