Why does inline block work this way?

I am new to html and css. I need two h3 elements to display in 1 line. I am trying to use display:inline-block

, but it is unexpected for me. Here is a sample fiddle http://jsfiddle.net/4NrXF/31/ . Here I have provided 4 different use cases for the inline-block attribute. I want the text "Some text before" to be displayed on the first line, and the text "Show text" on the second line. As you can see, the first option generates only one line, and this is out of place for me. I thought option 4 would work correctly, but as you can see, for some reason it doesn't generate the "DISPLAY TEXT" line. Why does inline block work?
Here is the html and css I am using:

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}