JSFiddle - React, Tailwind, and code Playground

HTML

<div id="p">

        <div id="pl">
          <img src="http://mortenhjort.dk/synchub/imgs/beamed-note.svg" alt="note">
          <h4>A Head Full Of Dreams <span>- Coldplay</span></h4>
        </div>

        <div id="pc">
          <a href="#"><img src="http://mortenhjort.dk/synchub/imgs/previous.svg" alt="Click to go back"></a>
          <a href="#"><img class="pp" src="http://mortenhjort.dk/synchub/imgs/play.svg" alt="Click to play"></a>
          <!-- <a href="#"><img class="pp" src="http://mortenhjort.dk/synchub/imgs/pause.svg" alt="Click to pause"></a> -->
          <a href="#"><img src="http://mortenhjort.dk/synchub/imgs/next.svg" alt="Click to skip"></a>
        </div>


        <div id="pr">
        
        </div>

          <time>00:14 / 00:30</time>

        <div>
    </div>

SCSS

body {margin:0}

div { display: flex; align-items: center; }

#p{
  background: #26272b;
  color:white;
  display: flex;
  align-items: center;
  padding: 1rem;
  justify-content:space-between;

  img{
    width: 1rem;
  }

  #pc{

    .pp{
    width: 2rem
    }
  }

}