As a beginner in html and css, I am facing an issue with displaying two h3 elements on the same line. I have tried using display:inline-block, but it's not working as expected. You can check out an example on jsfiddle here.
I have provided 4 different options of using the inline-block attribute.
My requirement is to display "Some text before" on the first row and "Display text" on the second row. The first option only generates one row which is not suitable for me. I was hoping the fourth option would work correctly, but unfortunately, it doesn't display the "DISPLAY TEXT" row for some reason. Can you explain why inline-block behaves this way?
Below is the HTML and CSS code 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}