Horizontally Align Labels with CSS - html

Question

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).
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:
This is similar to Align labels in form next to input 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.
Here's my current CSS (the classes should be self-explanatory):
.propertyTitle {
text-transform: uppercase;
width: 300px;/*Why doesn't this have any effect?*/
}
.propertyValue {
text-align: left;
}
And my current HTML:
<div>
<div>
<label class="propertyTitle">Hello:</label>
<label class="propertyValue">World</label>
</div>
<div>
<label class="propertyTitle">Goodbye:</label>
<label class="propertyValue">To All of the People in the World</label>
</div>
<div>
<label class="propertyTitle">I Want:</label>
<label class="propertyValue">These labels to line up</label>
</div>
</div>
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.
Here's a jsFiddle 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.
EDIT
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?

Answer 1

grouping your divs and labels like so:
<div>
<div class="titleWrap">
<label class="propertyTitle">Hello:</label>
<label class="propertyTitle">Goodbye:</label>
<label class="propertyTitle">I Want:</label>
</div>
<div class="valueWrap">
<label class="propertyValue">World</label>
<label class="propertyValue">To All of the People in the World</label>
<label class="propertyValue">These labels to line up</label>
</div>
</div>
with the following CSS:
.propertyTitle {
display:block;
text-transform: uppercase;
width: auto;
}
.titleWrap{
display:inline-block;
}
.propertyValue {
display:block;
width:auto;
}
.valueWrap {
display:inline-block;
}
should give you the desired result without having to specify the widths
Check out this jsFiddle

Answer 2

try using display:inline-block on your labels
.propertyTitle {
text-transform: uppercase;
width: 300px;/*Why doesn't this have any effect?*/
display: inline-block;
}

Answer 3

by default label is an inline element. that's why width property doesn't apply to label.
to apply the width you have to convert the label into a block level element by using display:block.
I hope it clarify the answer.
so you have to use this CSS property in your code.
.propertyTitle {
text-transform: uppercase;
display:inline-block; /*this will make the label a block level element*/
width: 300px;/*Why doesn't this have any effect?*/
}

Answer 4

More modern version is display: inline-flex;