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

Question

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>

Answer 1

I did this without bootstrap, lmk if you're interested and I'll share tom. See attached image