title: HTML CSS how to align two divs one by one and dynamically change width
body: <p>I have one html form, and need to get read and blue circle one by one (vertically alligned), and when value inside circle is entered i need to dynamically with css change width to get desired value..i try with display: inline-table and block but it is not working...here is picture that of what i get and what i need to get:</p>
  
  <pre><code>http://imgur.com/Jt1nuh3
  </code></pre>
  
  <p>From image i need to automatically change left and width on red and blue circle that is depending on entered circle value (+999) and need to bi inline like in down picture...i get using inline for css like in first page...</p>
  
  <p>Here is my html code:</p>
  
  <pre><code>&lt;!-- page device statistics --&gt;
      &lt;div class="devicestat" title="Online: 0"&gt;
          &lt;!-- page device title --&gt;
          &lt;div class="stat-name"&gt;
              &lt;div class="stat-name-devices"&gt;Devices&lt;/div&gt; 
              &lt;!-- android device --&gt;
              &lt;div class="stat-badget-android" title="Android"&gt;+0&lt;/div&gt;
              &lt;!-- enigma device --&gt;
              &lt;div class="stat-badget-enigma" title="Enigma"&gt;+0&lt;/div&gt;
  
              &lt;div class="stat-number"&gt;0&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>