Spotify Clone – Footer Part – HTML, CSS

1. I am trying to clone Spotify using HTML and CSS only, I have gotten the player part, but I am not able to center the player and get the other two details, please check the attached images.
   The image called ‘Goal’ is what I want to achieve, and here is my code for that part only. I have also attached the image named "website"; It is how my website looks right now.

https://imgur.com/PXbmnef – This is the result I want
https://imgur.com/9PDB9Lw – This is how my website looks like right now

<div class="music-player">
      <div class="album">
        <div class="playing">
          <img src="assets/rapgod.jpeg" alt="rapgod" class="cover">
          <p class="cover-name">Rap God</p>
          <p class="artist">Eminem</p>
        </div>
        <div class="playing_icons">
          <i class="fa-regular fa-heart"></i>
          </div>
      </div>

      <div class="player">
        <div class="player-controls">
          <img src="/assets/player_icon1.png" alt="" class="player-controls-icon">
          <img src="/assets/player_icon2.png" alt="" class="player-controls-icon">
          <img src="/assets/player_icon3.png" alt="" class="player-controls-icon" style="opacity: 1; height: 2rem;">
          <img src="/assets/player_icon4.png" alt="" class="player-controls-icon">
          <img src="/assets/player_icon5.png" alt="" class="player-controls-icon">
        </div>
        <div class="playback-bar">
          <span class="current-time">00:00</span>
          <input type="range" min="0" max="100" class="progress-bar" step="1">
          <span class="curt-time">3:33</span>
        </div>
        <div class="controls"></div>
      </div>
    </div>

and here is my css note(I have written music twice, because One was on the top when I used it to form the layout and one is at the bottom. I have only included the code which I am facing the problem with)

.music-player {
  background-color: black;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 72px;
}

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

.album {
  width: 25%;
}

.player {
  width: 50%;
}

.controls {
  width: 25%;
}

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

.player-controls-icon {
  height: 1rem;
  margin-right: 1.75rem;
  opacity: 0.7;
}

.player-controls-icon:hover{
  opacity: 1;
  transition: 0.2s;
}

.playback-bar {
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-bar {
  width: 70%;
  appearance: none;
  background-color: transparent;
  cursor: pointer;
}

.progress-bar::-webkit-slider-runnable-track {
  background-color: #ddd;
  border-radius: 100px;
  height: 0.2rem;
}

.progress-bar::-webkit-slider-thumb {
  appearance: none;
  height: 1rem;
  width: 1rem;
  background-color: #1bd760;
  border-radius: 50%;
  margin-top: -6px;
}

.progress-bar::-webkit-slider-runnable-track:hover {
  background-color: #1bd760;
  transition: 0.2s;
}

.progress-bar::-webkit-slider-thumb:hover {
  background-color: #ddd;
  transition: 0.2s;
}

I have tried multiple prosperities and none of them worked