title: Align Label with Span on Same Line - CSS
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Thanks!</p>
  
  <p><img src="https://i.stack.imgur.com/rTBp4.png" alt="enter image description here"></p>
  
  <pre><code>    &lt;div id="letsGetStarted"&gt;
      @using (Html.BeginForm())
      {
  
          @Html.ValidationSummary(true)
  
          &lt;div&gt;@Html.LabelFor(model =&gt; model.NewClub.NewClubName) &lt;span class="required"&gt;&amp;#42;&lt;/span&gt;&lt;/div&gt;
          @Html.EditorFor(model =&gt;model.NewClub.NewClubName)
          @Html.ValidationMessageFor(model =&gt; model.NewClub.NewClubName)
  
  
          &lt;div&gt;
              @Html.LabelFor(model =&gt; model.ClubTypes) &lt;span class="required"&gt;&amp;#42;&lt;/span&gt;
          &lt;/div&gt;
  
          @Html.DropDownListFor(model =&gt; model.ClubTypes, Model.ClubTypes)
          @Html.ValidationMessageFor(model =&gt; model.ClubTypes)
  
          &lt;p&gt;
              &lt;input type="submit" name="submit" value="Submit" class="btn"/&gt; &lt;input type="reset" name="reset" value="Cancel" class="btn ltgrey" /&gt; 
          &lt;/p&gt;
      }
  &lt;/div&gt;
  </code></pre>
  
  <p>I have a working example of the issue <a href="http://jsfiddle.net/castonzo/sSVPc/" rel="noreferrer">here</a>: </p>