Nesting <a> element inside Html.LabelFor - html

Question

<div class="form-group col-sm-5">
#Html.LabelFor(m => m.foo)
<a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a>
</div>
The <a> element (i.e. the glyphicon popover) appears beneath the label element, but I'd like to have it placed to the right side of the label instead. Is there a way to accomplish this by way of nesting the <a> inside of the #Html.LabelFor? It'd be cool to have something like:
<label for="foo"> I'm the label!
<a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a>
</label>
If not, will I have to use positioning instead?
EDIT: I ended up taking Ramo's advice and rolling with something simple.
<div class="form-group col-sm-5">
<label>
<span> I'm a **hard-coded** LabelFor DataAnnotation! </span>
<a data-toggle="popover" data-content="I'm a popover!" href="#">
<span class="glyphicon glyphicon-info-sign"></span>
</a>
</label>
</div>
Still interested if there's an MVC way to get Glyphicons to cohere with #Html.LabelFor, but my question is more or less academic at this point.
EDIT #2: I found an even easier solution which is kind of obvious in hindsight. This approach uses positioning (i.e. display: inline) to ensure that the accompanying <a> and <span> elements display on the same line.
<div class="col-sm-5 form-group">
#Html.LabelFor(m => m.foo, new { style = "display: inline;" })
<a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a>
</div>

Answer 1

You could use a table and do something like this
<table>
<tr>
<td>#Html.LabelFor(m => m.foo)</td>
<td><a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a></td>
</tr>
</table>
EDIT:
A quick google search brought me to this result which uses CSS to accomplish your goal Label and text box on the same line using css
EDIT 2:
Since you are weary of using tables you might be able to do something like this. I have not tested the code yet, but I do believe it should give you your desired behavior.
HTML:
<div>
<div class="Label">#Html.LabelFor(m => m.foo)</div>
<a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a>
</div>
CSS:
.Label{
display: inline-block;
}

Answer 2

I suggest you go ahead with positioning. Do not take unusual choices here use everything for what is supposed to be used because otherwise you will notice unusual behavior of your code in future.

Answer 3

Try this:
#{
var foo = Html.LabelFor(m => m.foo)
}
<a>#foo</a>