Create dynamic progress bar and buttons layout

HTML

<div class="parent">
  <div class="container">
    <div class="left"><button>⏮</button><button>⏸</button><button>⏭</button></div>
    <div class="middle">let's say this is a progress bar of the song</div>
    <div class="right"><button>Repeat</button><button>Like</button></div>
  </div>
</div>

CSS

body {width: 100%; padding: 0;margin: 0;}

.container {background: #222;color:white;padding: 2rem;margin: 2rem;display:flex;gap: 2rem;align-items:center; position:relative}

.container > div {display: flex;}

.left {flex:0 0 auto;gap: 1rem;}
.middle{flex:1;flex-direction:column;align-items:stretch;gap: 0rem !important;}
.right{flex:0 0 auto;gap: 1rem;pointer-events: none;}

@media (max-width:720px){
  .container{
    flex-direction:column;
    padding:1rem;
  }
  .left{order:2;width:100%;justify-content:center}
  .right{order:1;width:100%;justify-content:space-between;position: absolute;bottom:0;padding: 1rem}
  .middle{order:0;width:100%}
}