CSS not getting applied to <label>

Question

I am developing a form and setting a size for the label and aligning it right so as to look decent. However the CSS is not getting applied. Here is my code:

label{
    width: 50%;
    text-align: right;
}

Fiddle

How do I get this working?

Answer 1

try (i test in your fiddle)

display:inline-block;

fiddle demo

Answer 2

You could make it an inline-block element:

UPDATED EXAMPLE HERE

label{
    width: 50%;
    text-align: right;
    display:inline-block;
}

You need to do this because a label is an inline element, and the following applies to it:

10 Visual formatting model details - 10.2 Content width: the 'width' property

This [width] property does not apply to non-replaced inline elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them (before any relative offset of children). Recall that inline boxes flow into line boxes. The width of line boxes is given by the their containing block, but may be shorted by the presence of floats