HTML Elements Not On Same Line

Question

I know this question is asked a TON on here but I feel like with this particular question the solution varies significantly depending on the elements surrounding CSS.

Anyways, I have a piece of jQuery here:

$(".classDiv").append("<h4>"+name+"</h4> - <h5>"+teacher+"</h5>");

And my HTML/CSS:

<div class="classDiv" style="margin-top: 100px;"></div>

.classDiv {
    margin: 0 0 20px; 
    padding: 5px 0 0; 
    border: 1px solid #d8d8d8; 
    background: #f9f9f9;     
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    -moz-box-shadow: inset 0 0 0 1px #fff;
    -webkit-box-shadow: inset 0 0 0 1px #fff;
    box-shadow: inset 0 0 0 1px #fff; 
}

I would like both of my name and teacher text to be on the same line. I have tried things such as a surrounding div with display: inline-block: but it doesn't seem to work.

Here is what is happening:

Answer 1

The use of <h4> and <h5> is totally inappropriate here.

Use <span> s, with a class to style them bigger if you want.

Answer 2

I would suggest using something different than h4 and h5. Do the same but use span instead
$(".classDiv").append("<span class="my-name">"+name+"</span> - <span class="teacher">"+teacher+"</span>");

If you want to style them just give them classes and play with css font properties.

Gl and enjoy

Answer 3

Header elements like h4 and h5 have a display of block by default. Block level elements stack on top of each other, as opposed to inline elements, which stack next to each other in the page flow. If you change your CSS to make the h4 and h5 each into inline elements, they'll sit next to each other:

.classDiv h4, .classDiv h5 {
    display: inline; /* or inline-block would work too */
}