JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
                            <div class="col-md-6">
                                 <ol class="number-circles">
                               <li value="7"><div class="ol-block"><div class="blue-heading">Title 1</div>
                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
                               </li>
                                <li><div class="ol-block"><div class="blue-heading">Title 2</div>
                                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
                               </li>
                               <li><div class="ol-block"><div class="blue-heading">Title 3</div>
                                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat justo sed semper semper. Maecenas blandit ipsum lacinia, dictum mi et, tristique tortor. Quisque tempor euismod urna, ut consectetur dui hendrerit ac. Proin sapien ex, tincidunt eget dui ut, rutrum imperdiet sapien. </div>
                               </li>
                                
                            </ol>
                            </div>
                            <div class="col-md-6">
                                 <ol class="number-circles four">
                              
                                <li><div class="ol-block"><div class="blue-heading">Title 4</div>
                                   Lorem ipsum dolor sit amet, consectetur adipiscing elit....

CSS

.col-md-6 {

  float: left;
  width: 50%;

}
.number-circles {
  margin: 40px 0 0 0;
  padding: 0;
  list-style-type: none;
}

  .blue-heading {
      color: red;
      font-weight: 600;
      margin-bottom: 5px;
  }

  li {
  counter-increment: step-counter;
  margin-bottom: 40px;

}

 .number-circles li::before {
          content: counter(step-counter);
          margin-right: 15px;
          font-size: 17px;
          background-color: red;
          border: solid 6px yellow;
          color: white;
          font-weight: bold;
          border-radius: 50%;
          height: 40px;
          display: inline-block;
          width: 40px;
          height: 40px;
          padding: 2px 8px;
          text-align: center;
          float: left;
    }

   .ol-block {
        float: left;
        display: inline-block;
        width: 85%;
        margin-bottom: 20px;
    }



ol.four li { counter-reset: item 2; }