Header is not allowing <span> to align in the same line - html

Question

I have a css header that is not allowing me to align a text in the same line using . I imagine there is a weird default to the header that doesnt allow me to do this how do i prevent the default or what else can i use instead?
HTML
h3>Size:</h3>
<?php echo "<span class='sP'>".$pSize ."</span><br>"?>
CSS
h3{
margin-top: 0;
margin-bottom: 0;
color: #7C7C7C;
font-size: 20px;
font-weight: bold;
text-align: left;
font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
}
.sP{
color: #7C7C7C;
font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
}

Answer 1

I think this would be the answer you are looking for - Just put display:inline-block. I have put a working sample with the answer.please try this, if there is any issue please do ask.
h3{
margin-top: 0;
margin-bottom: 0;
color: #7C7C7C;
font-size: 20px;
font-weight: bold;
text-align: left;
font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
display:inline-block;
}
.sP{
color: #7C7C7C;
font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
display:inline-block;
}
<h3>Size:</h3>
<span class='sP'>hi</span><br>

Answer 2

Try to put <span> in <h3> tags as header takes the full width.
<h3>Size:
<?php echo "<span class='sP'>".$pSize ."</span><br>"?>
</h3>

Answer 3

Heading elements (h1-h6) are block level elements so that's why you specifically need to set them display: inline-block in order to display something next to them.
h1 { display: inline-block }
span { display: inline-block }
<h1>Hello, i'm a big fat heading</h1>
<span>Look at me, i'm a little 'ol span</span>