JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div class="container">

  <dl class="row mt-3 mb-3">

    <dt class="col-4">Foreword</dt>
    <dd class="col-8">Carmelo Ezpeleta – CEO Dorna Sports</dd>

    <dt class="col-4">The Season</dt>
    <dd class="col-8">An overview by Mat Oxley</dd>

    <dt class="col-4">Technical Review</dt>
    <dd class="col-8">Mat Oxley</dd>

    <dt class="col-4">The Bikes</dt>
    <dd class="col-8">A two-page focus on each of the bikes from Aprilia, Ducati, Honda, KTM, Suzuki, and Yamaha</dd>

    <dt class="col-4">The Riders</dt>
    <dd class="col-8">A detailed account of each rider’s season</dd>

    <dt class="col-4">The Races</dt>
    <dd class="col-8">Eight-pages per MotoGP round report including detailed results data</dd>

    <dt class="col-4">Moto2</dt>
    <dd class="col-8">A five-page season round-up</dd>

    <dt class="col-4">Moto3</dt>
    <dd class="col-8">A five-page season round-up</dd>

    <dt class="col-4">Red Bull Rookies Cup</dt>
    <dd class="col-8">The season in review</dd>

    <dt class="col-4">Two Wheels for Life</dt>
    <dd class="col-8">Update on the year</dd>

    <dt class="col-4">Champions</dt>
    <dd class="col-8">A history of Grand Prix Champions</dd>

  </dl>

</div>

SCSS

@import 'http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css';

BODY {
  background: #e9e9e9;
  font-family: 'Exo', sans-serif;
}

DT {
  text-transform: uppercase;
  letter-spacing: .05rem;
}

DT:after {
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  position: absolute;
  background: #b6b6b6;
}