JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main-wrapper">
<div id="block-views-faq-block-1" class="block block-views">
  <h2>TOP 5 FAQs</h2>

  <div class="content">
    <div class="view view-faq view-id-faq view-display-id-block_1 view-dom-id-6e1da851e7ffdde980a0a3505232f422">
      <div class="view-content">
        <div class="views-row views-row-1 views-row-odd views-row-first">
          <div class="views-field views-field-title">
            <span class="field-content">
              <a href="/what-fraud-security-alert" data-gtm-category="faq" data-gtm-action="faq-expand" data-gtm-label="[LABEL]">What is a fraud security alert?</a>
            </span>
          </div>
        </div>

        <div class="views-row views-row-2 views-row-even">
          <div class="views-field views-field-title">
            <span class="field-content">
              <a href="/do-i-need-protect-my-identity-if-my-credit-bad" data-gtm-category="faq" data-gtm-action="faq-expand" data-gtm-label="[LABEL]">Do I need to protect my identity if my credit is bad?</a>
            </span>
          </div>
        </div>

        <div class="views-row views-row-3 views-row-odd">
          <div class="views-field views-field-title">
            <span class="field-content">
              <a href="/how-can-i-improve-my-credit-score" data-gtm-category="faq" data-gtm-action="faq-expand" data-gtm-label="[LABEL]">How can I improve my credit score?</a>
            </span>
          </div>
        </div>

        <div class="views-row views-row-4 views-row-even">
          <div class="views-field views-field-title">
            <span class="field-content">
              <a href="/why-do-i-get-different-scores-different-credit-score-sources" data-gtm-category="faq" data-gtm-action="faq-expand" data-gtm-label="[LABEL]">Why do I get different scores from different credit score sources?</a>
            </span>
          </div>
        </div>

        <div class="views-row views-row-5 views-row-odd views-row-last">
          <div...

CSS

div {
  display: block;
}

#main-wrapper {
  max-width: 1168px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3em;
}

#block-views-faq-block-1 {
  background-color: #4a6262;
  display: inline-block;
  margin-bottom: 3em;
  width: 100%;
}

#block-views-faq-block-1 {
  display: inline-block;
  float: right;
  width: 30%;
}

#block-views-faq-block-1 h2 {
  font-size: .9em;
  font-weight: bold;
  letter-spacing: .05em;
  padding-top: .5em;
  text-transform: uppercase;
  color: #fff;
  font-size: .8em;
  font-weight: bold;
  padding: 1em 1em 1em 2em;
  text-transform: uppercase;
}

#block-views-faq-block-1 .view-content {
  background-color: #5c7575;
  margin: 0 auto;
  padding-bottom: 2em;
  width: 100%;
}

#block-views-faq-block-1 .view-content .views-row {
  margin-bottom: 0;
  padding: 1em 1.5em 0 3em;
}

#block-views-faq-block-1 .view-content .views-row a {
  color: #fff;
  font-size: .9em;
  line-height: 1.6em;
  text-decoration: none;
}

.field-body a:visited {
  color: #dc8d2f;
}

.field-body a {
  color: #dc8d2f;
  text-decoration: underline;
  font-weight: lighter;
}

#block-views-faq-block {
  display: inline-block;
  margin-right: 10%;
  width: 60%;
}

#block-views-faq-block .faq-form-title {
  font-family: Georgia, TimesNewRoman, 'Times New Roman', Times, Baskerville, Georgia, serif;
  padding: 4px 0 0 40px;
  position: relative;
  width: 100%;
}

h3 {
  color: #002740;
  margin: 0;
  padding: 0;
  font-size: 1.3em;
  font-weight: bold;
  letter-spacing: .1em;
  text-transform: uppercase;
}

h3 {
  display: block;
  font-size: 1.17em;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}

#block-views-faq-block .view-id-faq .view-content {
  margin-left: 40px;
  margin-top: 10px;
  float: left;
}

#block-views-faq-block .view-faq .views-row {
  margin: 20px 0 30px 0;
}

fieldset.views-fieldset.collapsed {
  height: 100%;
}

fieldset.views-fieldset {
  border:...