JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cta">
    <div class="small-cta">
        <div class="l-container">
          <div class="l-row">
            <div class="l-col min-0--8">
              <div class="small-cta-left-container">
                <h1 class="small-cta-header">Ask the Experts</h1>

                <div class="small-cta-text__small">
                  Get answers and insights from industry professionals and other experienced
                  users.
                </div>
              </div>
            </div>

            <div class="l-col min-0--4">
              <div class="small-cta-right-container">
                <a class="small-cta-button" href="/login.html"><span class=
                "cta-button__inner">Ask a Question</span></a>
              </div>
            </div>
          </div>
        </div>
      </div>
</div>

CSS

.cta {
    transition: transform .3s;
    backface-visibility: hidden;
    background: #373c44;
    min-height: 120px;
}

.small-cta {
    color: #ffffff;
    line-height: 1.6;
    text-align: center;
    width: 100%;
    max-width: 692px;
    margin: 0 auto;
}

.l-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    max-width: 1190px;
}

@media (min-width: 0px)
.min-0--8 {
    display: block;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

@media (min-width: 0px)
.min-0--4 {
    display: block;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

@media (min-width: 768px)
.l-container {
    padding: 0 16px;
    max-width: 1202px;
}

@media (min-width: 768px)
.l-row {
    margin-left: -16px;
    margin-top: -16px;
}

.l-row {
    display: flex;
    flex-flow: wrap;
    margin-top: -10px;
    margin-left: -10px;
}

.small-cta-left-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
    min-height: 120px;
    margin-right:20px;
}

h1.small-cta-header {
    font-size: 25px;
    text-align: left;
    margin: 0px;
}

.small-cta-text__small {
    color: #ffffff;
    font-size: 13px;
    margin-top: -5px;
    text-align: left;
    margin-bottom: 6px;
}

.small-cta-right-container {
    flex-direction: column;
    justify-content: center;
    overflow: auto;
    min-height: 120px;
    display: flex;
}

.small-cta-button {
    display: inline-flex;
    color: #ffffff;
    background: #ee3237;
    background: -moz-linear-gradient(left, #ee3237 0%, #f87c43 100%);
    background: -webkit-linear-gradient(left, #ee3237 0%,#f87c43 100%);
    background: linear-gradient(to right, #ee3237 0%,#f87c43 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee3237', endColorstr='#f87c43',GradientType=1 );
    transition: all .3s;
    border-radius: 2px;
    border-bottom: 3px solid #af171b;
    height: 44px;
    text-align: center;
    vertical-align: middle;
    width:...