Line after character added by CSS

In my CSS I have defined the following:

.required:before
 {
    content: "*";
    font-weight: bold;
    color: Red;
 }

and the following in my view:

   <div class="editor-label required">
        Customer Group
    </div>
    <div class="editor-field">
        @Html.DropDownList("GroupId", "")
        @Html.ValidationMessageFor(Function(model) model.GroupId)
    </div>

But when I run the view it puts an astericks but then on the next line the label, I would like them to be on the same line. Any ideas?


.............................................

HI now define position as like this

do this css

.required:before
 {
    content: "*";
    font-weight: bold;
    color: Red;
    position:absolute;
    left:0;
    top:0;
 }

.required{
position:relative;
    padding-left:10px;
}

adjust left or top according to your design