<h2>.col-4 / .col-8</h2>
  <div class="row">
    <div class="col col-4"><strong>.col-4</strong><br>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="col col-8"><strong>.col-8</strong><br>Ducimus voluptatum doloremque, quam dolores asperiores et blanditiis odio, distinctio velit quibusdam exercitationem vel, id quasi ipsum cupiditate cum eaque dignissimos! Error.</div>
  </div>    
  
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 30px;
}

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

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

/* etc… */

body {
  margin: 1em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.