title: Horizontally Align Labels with CSS
body: <p>I've got an issue that I'd love to solve by using CSS without resorting to statically sizing my labels (but perhaps it isn't possible).</p>
  
  <p>I have two labels per line, one for displaying a "title" and the other for displaying the associated "value". Here's how I'd like it to look:</p>
  
  <p><img src="https://i.stack.imgur.com/lP7Qy.png" alt="enter image description here"></p>
  
  <p>This is similar to <a href="https://stackoverflow.com/questions/9686538/align-labels-in-form-next-to-input">Align labels in form next to input</a> but I'm wanting the second element per line left-aligned instead of the first one to be right-aligned. I tried modifying the accepted answer from that question and set the width of the "title" label, but that has no effect on my output. As I mentioned above, I'd rather not hard-code a width anyways, but I was hoping to get something working before trying to find a good, long-term solution that can account for larger "title" values.</p>
  
  <p>Here's my current CSS (the classes should be self-explanatory):</p>
  
  <pre><code>.propertyTitle {
      text-transform: uppercase;
      width: 300px;/*Why doesn't this have any effect?*/
  }
  .propertyValue {
      text-align: left;
  }
  </code></pre>
  
  <p>And my current HTML:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div&gt;
          &lt;label class="propertyTitle"&gt;Hello:&lt;/label&gt;
          &lt;label class="propertyValue"&gt;World&lt;/label&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;label class="propertyTitle"&gt;Goodbye:&lt;/label&gt;
          &lt;label class="propertyValue"&gt;To All of the People in the World&lt;/label&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;label class="propertyTitle"&gt;I Want:&lt;/label&gt;
          &lt;label class="propertyValue"&gt;These labels to line up&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The HTML can be modified as well, if that'd make it easier. To conform with best practices, I'd rather not use tables to make this work.</p>
  
  <p>Here's a <a href="http://jsfiddle.net/XUKx9/" rel="nofollow noreferrer">jsFiddle</a> showing what I have now, what am I missing? Ideally this solution would work for IE8+ and Firefox, so unfortunately HTML5 and CSS3 elements are discouraged.</p>
  
  <p><strong>EDIT</strong><br>
  To reiterate after the first two answers came in (that both solve my issue), is there a way to do this without hard-coding a width for my "title" labels?</p>