How to stack in-line-block elements - html

Question

Is it possible to stack in-line-block elements?
I have a DIV which I want the elements inside it (h1 and P) to be centred. So I set the DIV to text-align centre and initally set the H1 and P tag to inline-blocks.respectively.
The idea was to display the two elements (H1 and P) as in-line-block elements so content is centred and a transparent png shows in the background for the length of the text.
But the problem I have is that having elements as inline-blocks means they will appears next to each other (I don't want this to happen), so I set the P tag as block element but it's resulting in the transparent png being as wide.
HTML:
<div id="hero">
<div class="container">
<div class="row">
<div class="span12" id="hero-text">
<h2>Heading line</h2>
<p>Paragraph line goes here</p>
</div>
</div>
</div>
</div>
CSS
#hero {
height: 435px;
width: 100%;
background: url(../img/hero-image.png) 0 0 no-repeat;
background-color: #999;
position: relative;
color: #FFF;
border-bottom: 3px solid #E6E6E6;
}
#hero-text {
position: absolute;
top: 33%;
text-align: center;
}
#hero h2 {
font-size: 4em;
font-style: normal;
line-height: 50px;
padding-top: 10px;
background: url(../img/bg-heading.png) repeat;
display: inline-block;
padding: 10px 20px;
}
#hero p {
font-size: 2em;
line-height: 30px;
display: block;
background: url(../img/bg-heading.png) repeat;
padding: 10px 20px;
}
Any help is appreciated.

Answer 1

This was actually tougher to solve than I originally thought. I could find two options for you. If you don't want to change your markup:
Give both #hero h2 and #hero p display:inline-block, and give them widths so that their combined width is greater than 100%. They both can be width:51%, or one can be wider than the other, just as long as their total is more than the width of the parent. This will cause the p to break to a new line. See http://codepen.io/anon/pen/cjDiH OR
2.If you want their widths to be fluid, I'd add an element in between the h2 and p that is display:block. I added hr, then took away its margin, padding and border to make it not visible other than to cause the line break. See http://codepen.io/anon/pen/AGDti

Answer 2

I see you figured out out to get them to stack like in your screenshot.
Now,
try adding width: auto; to #hero p in your css.