JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
  <ol>
    <li> <a href="#">
      <div><span>test 1</span>
        <p>Mvdshe</p>
      </div>
      </a> </li>
    <li> <a href="#">
      <div><span>test 12</span>
        <p>sdgmksgb</p>
      </div>
      </a>
      <div class="icons"><a href="#" class="play"></a><span class="dividr"></span><a href="#" class="suffle"></a></div>
    </li>
    <li><a href="#">
      <div><span>test 11</span>
        <p>Name dgdg</p>
      </div>
      </a></li>
  </ol>
</div>

CSS

@charset "utf-8";

/* CSS Document */

.test { position:relative; height:auto; width:100% }

.test ol { margin:0; padding:0; font:normal 30px 'SegoeWPLight', Verdana, Geneva, sans-serif; color:#afafaf; text-align:left; list-style:none; counter-reset: listCounter; }

.test ol li { vertical-align:middle;  border-bottom:#d4d4d4 solid 1px; border-top:#fff solid 1px; counter-increment: listCounter; }

.testol li:before { content: counter(listCounter) " "; width:30px; margin-right:15px; display: inline-block; text-align: right; }

.test ol li span { vertical-align:middle; display:block; color:#008fcd; font:normal 18px 'SegoeWPLight', Verdana, Geneva, sans-serif; }

.test ol li p { vertical-align:middle; display:block; margin:0; padding:0; font:normal 14px 'SegoeWPLight', Verdana, Geneva, sans-serif; color:#797979; }

.test ol li img { vertical-align:middle; padding-left:10px }

.test ol li div { display:inline-block; margin-left:25px; vertical-align:middle; }

.test ol a { text-decoration:none; font:normal 30px 'SegoeWPLight', Verdana, Geneva, sans-serif; color:#afafaf; display:block; padding:10px 20px;}

.test ol a:hover { background-color:#f4f4f4 }

.test ol a.mus_active li { background-color:#f4f4f4 }

.icons { display:inline-block; float:right; vertical-align:middle; width:auto; margin-top:20px }

.play { background:url(http://www.timeshighereducation.co.uk/magazine/graphics/search_icon_big.gif) no-repeat left; width:25px; height:25px; background-size:15px; display:inline-block !important; }

.suffle { background:url(../images/suffle.png) no-repeat left; width:25px; height:25px; display:inline-block !important }

.dividr { background:url(http://www.timeshighereducation.co.uk/magazine/graphics/search_icon_big.gif) no-repeat left; width:3px; height:28px; display:inline-block !important; margin:0 8px 10px 0 }