JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row stepRow">
    <div class="col-12-md ">
      <div id="stepDisplay">
        <span class="stepBlock">
          <h3 class="headerStep">Step 1</h3>
          <p class="descStep">Basic Details</p>
        </span>
        <span class="stepBlock">
          <h3 class="headerStep">Step 2</h3>
          <p class="descStep">More Details</p>
        </span>
        <span class="stepBlock">
          <h3 class="headerStep">Step 3</h3>
          <p class="descStep">Payment Details</p>
        </span>
      </div>
    </div>

  </div>

CSS

.stepBlock {
  display: inline-block;
  text-align: center;
  width: 30%;
}

.headerStep, .descStep {
  display: block;
}