CSS alignment issue with image - html

Question

Take a look at this image:
http://i.gyazo.com/a5bf5097e6783d4879f12fdba0b2bbec.png
I want to get the "Test" below Profile, a BR html tag produces the above result and I don't want that.
Heres my code for this:
http://pastebin.com/raw.php?i=hW3jDrLu
<i class="fa fa-user fa-3x" style="vertical-align:middle;"></i>
<span style="font-size: 12pt;">Profile <span style="color: #979797;font-size:8pt;">Test</span></span>
I would like the "Test" to be right below the Profile header

Answer 1

It's tough to say without seeing more of your code, but I imagine your best bet is putting the img in one div and the text in another. Then you can have a line break in the text within its div and still have the div to the right of the img.
Here is a mock up of how it should work.
Apparently I have to add the fiddle code here as well:
HTML:
<div class="imgC"><img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" height="42" width="42"> </img></div>
<div class="textC"><span style="font-size: 12pt;">Profile <br></span><span style="color: #979797;font-size:8pt;">Test</span></div>
CSS:
.imgC{
display:inline-block;
float:left;
}
.textC{
display:inline-block;
float:left;
}

Answer 2

You may also want to preserve their block property by floating them and using the clear attribute (fiddle here):
HTML:
<div id="Container">
<img id="Icon" src="http://goo.gl/OJhO2s"/>
<div id="InfoContainer">
<span class="profile">Profile</span>
<span class="test">Test</span>
</div>
</div>
CSS:
#Icon {
width: 64px;
height: 64px;
float: left;
}
#InfoContainer {
float: left;
}
#InfoContainer span {
display: block;
clear: both;
}
.profile {
font-size: medium;
}
.test {
font-size: small;
color: #444;
}