Align Label with Span on Same Line - CSS - 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">*</span></div>
#Html.EditorFor(model =>model.NewClub.NewClubName)
#Html.ValidationMessageFor(model => model.NewClub.NewClubName)
<div>
#Html.LabelFor(model => model.ClubTypes) <span class="required">*</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.

Answer 4

Try This
#letsgetStarted {
overflow:hidden;
}
#letsgetStarted label {
float:left;
width:auto;
}
#letsgetStarted span.required {
float:left;
}
Place your html text inside label tags.
I did not try it though. It should work for you.