In html use of style="vertical-align: text-top" doesnt seem to have any effect

Question

Im trying to get the text following the audio control to be vericaly line with the text in the audio control but its way lower, my use of style="vertical-align: text-top" doesnt seem to have any effect

<div>
  <span name="fileplay">
    <audio preload="none" controls="controls"><source src="file:/E:/Music/Wav/David%20Guetta/Guetta%20Blaster/01%20-%2007%20-%20Money.wav"></audio>
  </span>
  <span style="vertical-align: text-top">Keep <a href="file:/E:/Music/Wav/David%20Guetta/Guetta%20Blaster/01%20-%2007%20-%20Money.wav">E:\Music\Wav\David Guetta\Guetta Blaster\01 - 07 - Money.wav</a></span>
</div>

Answer 1

Get rid of the vertical-align, the usage is very limited, it aligns inline elements inside its containing line box, note not containing box, but line box.

.player {
  display: flex;
  align-items: center;
}

audio {margin: auto 1.5rem;}

<div class="player">
  <span name="fileplay">
    <audio preload="none" controls="controls"><source src="Money.wav"></audio>
  </span>
  <span style="vertical-align: text-top">Keep <a href="Money.wav">Money.wav</a></span>
</div>