How do I centre a non-bootstrap progress bar vertically?

I am trying to make a progress bar with some text and the progress bar aligned vertically. How can I achieve this? I have tried some other answers but they just won't work.

.div-shadow {      box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;      width: 80%;      margin-top: 2rem !important;      margin-bottom: 1rem;      margin: auto;  }    p {      font-family: 'Roboto', sans-serif;      text-align: center;      font-size: 2rem;      color: #fff;      margin: 0;      margin-top: 0.2%;      margin-left: 5%;      margin-right: 5%;      padding-bottom: 1%;      align-items: flex-start;  }    progress {      float: right;  }  

<div class="div-shadow">      <p style="text-align: left; margin-left: 2%; margin-right: 2%; padding-bottom: 0;">          JavaScript          <progress value="15" max="100" style=""></progress>      </p>  </div>  

https://stackoverflow.com/questions/65855632/how-do-i-centre-a-non-bootstrap-progress-bar-vertically January 23, 2021 at 12:08PM