Align Label with Span on Same Line - CSS

Question

OK, I am really embarrassed that I cannot figure this out but... I have form labels that are followed by a "required" asterisk. The asterisk simply drops to the next line under the label text instead of aligning next to the text.

I want the required asterisk to end up on the same line as the label text. I shouldn't have to use floats for this right? They are in the same div so I am not sure why they just don't lay next to each other.

Thanks!

    <div id="letsGetStarted">
    @using (Html.BeginForm())
    {

        @Html.ValidationSummary(true)

        <div>@Html.LabelFor(model => model.NewClub.NewClubName) <span class="required">&#42;</span></div>
        @Html.EditorFor(model =>model.NewClub.NewClubName)
        @Html.ValidationMessageFor(model => model.NewClub.NewClubName)


        <div>
            @Html.LabelFor(model => model.ClubTypes) <span class="required">&#42;</span>
        </div>

        @Html.DropDownListFor(model => model.ClubTypes, Model.ClubTypes)
        @Html.ValidationMessageFor(model => model.ClubTypes)

        <p>
            <input type="submit" name="submit" value="Submit" class="btn"/> <input type="reset" name="reset" value="Cancel" class="btn ltgrey" /> 
        </p>
    }
</div>

I have a working example of the issue here:

Answer 1

Wrap span into the <label></label>

<div>
    <label for="NewClub_NewClubName">Name your club <span class="required">*</span></label> 
</div>

you can set margin to move it to left according to your need:

Example

Updated Fiddle

Update

As you are using @LabelFor() so give this to your label:

display:inline;

Answer 2

If you cannot mess with HTML, but you can with CSS>

label{display:inline; clear:both;}

be careful, because this will affect all labels...

Answer 3

In plain HTML5 and CSS3, you can use the following rule. I don't know how to translate this to ASP.net:

.required:after {
    content: "*";
}

Then, just write your HTML as

<div>
    <label for="NewClub_NewClubName" class="required">Name your club.</label>
    <input ...>
</div>

On the other hand, you can use the HTML5 required attribute, which I don't know how to translate to ASP. With placeholder, you might not need a label.

<div>
    <input type="text" name="newClub" placeholder="New club name" required/>
</div>

You can style this using the pseudoclass :required. If you put the label afterwards so you can use the CSS3 adjacent selector, you can even try:

<div>
    <input type="text" id="newClub" name="newClub"
        placeholder="New club name" required/>
    <label for="newClub">New club name.</label>
</div>

and

input:required + label:before {
    content: "*";
    color:   red;
}

But again, I don't know ASP.