JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://fonts.googleapis.com/css?family=Exo:400,500,600,700"></script>
<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

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

DT {
  text-transform: uppercase;
  letter-spacing: .05rem;
  
  &:after {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    position: absolute;
    background: #b6b6b6;
  }

DT {
  text-transform: uppercase;
  letter-spacing: .05rem;
  overflow: hidden; // new property

  &:after {
    content: '';
    display: inline-block; //changed from block to inline-block
    height: 1px;
    width: 100%;
    position: absolute;
    background: #b6b6b6;
    margin-top: 10px; //for top spacing 
    margin-left: 5px; //for left spacing
  }

}


}

JavaScript

$('.carousel').slick({
  infinite: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  fade: true,
  asNavFor: '.carousel-nav',
  prevArrow: '<button class="slick-prev">&#10094;</button>',
  nextArrow: '<button class="slick-next">&#10095;</button>',
});

$('.carousel-nav').slick({
  infinite: false,
  focusOnSelect: true,
  arrows: false,
  slidesToShow: 3,
  asNavFor: '.carousel',
});