CSS Progress bar styling issues

Question

I'm trying to create a header with a progress bar at the top. I'm trying to make it responsive. I've tried reading up about it and tried a few solutions but no success. So my questions are:

1. How do I get the progress bar to shrink with the screen? So far I've used tables to organize the elements in and I can wrap the table but the progress bar itself won't shrink.
2. How do I right-align the progress bar so it shows on the right when full screen?

Here's my code:

.header-style {
  background-color: #2A417B;
  height: auto;
  width: auto;
  display: block;
}

.header-text {
  color: white;
  margin: 0em;
  text-align: left;
  font-size: 1.5em;
}

.header-style-logo {
  background-color: #2A417B;
  display: block;
  position: relative;
  text-align: left;
  padding: 1em;
}

.table-wrap {
  display: block;
}

.table-wrap td {
  display: inline-block;
}

progress {
  display: inline-block;
  width: 50em;
  height: 2em;
  margin: 1em;
  /* IE settings */
  color: #8FC23F;
  background-color: white;
  border: none;
}


/* Chrome settings */

progress::-webkit-progress-bar {
  background: white;
}

progress::-webkit-progress-value {
  background: #8FC23F;
}


/* Firefox settings */

progress::-moz-progress-bar {
  background: white;
}

<header class="header-style">
  <table class="table-wrap">
    <tr>
      <td><img class="header-style-logo" src="logo_white.png" width="111" height="72" /></td>
      <td>
        <h1 class="header-text"> My heading</h1>
      </td>
      <td> <progress value="5" max="100"></progress></td>
    </tr>
  </table>
</header>

Answer 1

You can achieve something like this via flexbox.

If you need elements on single line:

.header-style {
  background-color: #2A417B;
  /* define as flex-container */
  /* by default items will be on single line */
  display: flex;
  /* center items */
  align-items: center;
}

.header-text {
  color: white;
  margin-right: 1em;
  text-align: left;
  font-size: 1.5em;
}

.header-style-logo {
  background-color: #2A417B;
  position: relative;
  text-align: left;
  /* don't shrink image */
  flex-shrink: 0;
  padding: 1em;
}

progress {
  width: 50em;
  height: 2em;
  margin: 1em;
  /* moving progress bar to right */
  margin-left: auto;
  /* IE settings */
  color: #8FC23F;
  background-color: white;
  border: none;
}

/* Chrome settings */
progress::-webkit-progress-bar {
  background: white;
}

progress::-webkit-progress-value {
  background: #8FC23F;
}

/* Firefox settings */
progress::-moz-progress-bar {
  background: white;
}

<header class="header-style">
  <img class="header-style-logo" src="logo_white.png" width="111" height="72" />
  <h1 class="header-text"> My heading</h1>
  <progress value="5" max="100"></progress>
</header>

If you want elements on multiple lines you need to add pseudoelement with margin-left: auto to push it to right and CSS order value less than progress. Demo:

.header-style {
  background-color: #2A417B;
  /* define as flex-container */
  display: flex;
  /* center items */
  align-items: center;
  /* allow moving items to new line */
  flex-wrap: wrap;
}

.header-text {
  color: white;
  text-align: left;
  font-size: 1.5em;
}

.header-style-logo {
  background-color: #2A417B;
  position: relative;
  text-align: left;
  padding: 1em;
  /* don't shrink image */
  flex-shrink: 0;
}

.header-style:after {
  content: "";
  /* adding order to display before progress bar */
  order: 0;
  /* move to the right */
  margin-left: auto;
}

progress {
  width: 50em;
  height: 2em;
  margin: 1em;
  /* IE settings */
  color: #8FC23F;
  background-color: white;
  border: none;
  /* display after pseudoelment */
  order: 1;
}

/* Chrome settings */
progress::-webkit-progress-bar {
  background: white;
}

progress::-webkit-progress-value {
  background: #8FC23F;
}

/* Firefox settings */
progress::-moz-progress-bar {
  background: white;
}

<header class="header-style">
  <img class="header-style-logo" src="logo_white.png" width="111" height="72" />
  <h1 class="header-text"> My heading</h1>
  <div class="margin-left-auto">
  </div>
  <progress value="5" max="100"></progress>
</header>