JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<ul>
<li class="current">
  <a>
    <span class="current-info">Step 1: </span>
    <span class="number">1.</span>
    <span class="booking-icon">Date</span>
  </a>
</li>
<li>
  <a>
    <span class="current-info">Step 2: </span>
    <span class="number">2.</span>
    <span class="calendar-icon">Calendar</span>
  </a>
</li>
</ul>

CSS

ul > li{
  display:block;
  margin:20px;
}
ul > li > a > .number{
  display:block;
      line-height: 34px;
}


ul > li > a > .number:after{
    content:'';
}
ul > li > a >.number:after{
    font-family: "FontAwesome";
    content: "\f058";
    font-size: 24px;
}