Why does inline-block work that way?

Question

I'm fairly new to html and css. I need two h3 elements to be displayed in 1 line. I am trying to use display:inline-block, but it works unexpected way for me. Here is fiddle example http://jsfiddle.net/4NrXF/31/ . Here i provided 4 different options of using inline-block attribute. I need text "Some text before" to be displayed on the first row, and text "Display text" on the second row. As you see - first option generates only one row, and thats inappropriate for me. I thought that 4 option will work correctly, but as you can see that doesnt generate "DISPLAY TEXT" row for some reason. Why does inline-block work like this?
Here is html and css i use:

Some text before
<h3 class="a"> DISPLAY </h3>
<h3 class="a"> TEXT </h3>

<h3 > DISPLAY </h3>
<h3 > TEXT </h3>

<h3 class="a"> DISPLAY </h3>
<h3 > TEXT </h3>

text before
<h3 > DISPLAY </h3>
<h3 class="a"> TEXT </h3>

.a {display: inline-block}

Answer 1

The "text before" is an inline element. If you want it on its own row, you can use your option 4 with "text before" wrapped in a block element, like p

<p>Some text before</p>
<h3 class="a"> DISPLAY </h3>
<h3 class="a"> TEXT </h3>