Flexbox: centering everything on one line - html

Question

I'm trying to recreate this layout with flexbox only:
I'm trying to keep it as simple as possible with minimal markup, however I'm having a hard time vertically centering everything on one line.
What am I doing wrong?
This is the code:
body {
margin: 0;
}
#p {
background: #26272b;
color: white;
display: flex;
align-items: center;
padding: 1rem;
justify-content: space-between;
}
img {
width: 1rem;
}
.pp {
width: 2rem
}
<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>
<!-- <img class="pp" src="http://mortenhjort.dk/synchub/imgs/pause.svg" alt="Click to pause"> -->
<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>
This is the JSFiddle: https://jsfiddle.net/h1k8v16g/

Answer 1

Your primary flex container is working to keep flex items vertically centered.
However, the content of the flex items is still in a block formatting context.
Therefore, make the flex items into flex containers with centering:
div { display: flex; align-items: center; }
revised fiddle
Learn more about the scope of a flex formatting context here: https://stackoverflow.com/a/37844240/3597276