title: How to create a progressbar with inverted text color for "progressed" part
body: <p>I'm trying it since hours, but I'm not getting any solution that works. The task is: create a progressbar with dynamic width and a centered label, that changes its text color between progressed and unprogressed part. Here is an image for clarification:</p>
  
  <p><img src="https://i.stack.imgur.com/7j4hp.png" alt="Example"></p>
  
  <p>So this works great, if i know the width of the whole progressbar. But it's not usable in a responsive design, where it's width is calculated automatically.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div class="progress" style="width: 400px;"&gt;
   &lt;div class="progressValue" style="width: 50%"&gt;
    &lt;div class="progressInnerLabel" style="width: 400px;"&gt;I'm a progress text&lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="progressLabel"&gt;I'm a progress text&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>.progress {
      position: relative;
  }
  
  .progressValue {
      overflow: hidden;
      position: absolute;
      height: 20px;
      background-color: blue;    
  }
  
  .progressInnerLabel {
      position: absolute;
      text-align: center; 
      color: white;  
      height: 20px;    
  }
  
  .progressLabel {
      background-color: #eee; 
      text-align: center; 
      color: black;    
  }
  </code></pre>
  
  <p>I've also created a fiddle, so you can play around with it: <a href="http://jsfiddle.net/Q82kF/2/" rel="noreferrer">http://jsfiddle.net/Q82kF/2/</a></p>
  
  <p>I would like to remove the width: 400px of my first div (class = progress) of my html, so the progress automatically gets the full available width. Does anybody have a solution for this?</p>
  
  <p>I DON'T wand to do it with javascript (or any lib). I think there must be a CSS/HTML only solution.</p>