How to display a header inline with paragraph text using divs or an alternative method

Question

I have this simple snippet in a WordPress widget:

 <h3>Kevin Smith</h3><h2>The Official Kevin Smith Website</h2>

The name is changed for privacy. Is there any possible way I get get these to appear on the same line?

I'm a CSS dummy, but I've tried doing things like:

 <div display:inline><h3>Kevin Smith</h3><h2>The Official Kevin Smith Website</h2></div>

But this doesn't work for reasons that are most likely obvious to CSS gurus.

Any guidance in how I can achieve putting these on the same line would be greatly appreciated!

* UPDATED SOLUTION *

For anybody with similar issues, I just used this -- with the help of @antyrat and @jacefarm:

<div style="display:inline">Kevin Smith</div><p style="display:inline">The Official  
Kevin Smith Website</p>

That way, I was able to style the div differently than the p, and they're both inline -- which is precisely what I was attempting to achieve.

Answer 1

Inline styles on HTML elements are written as HTML attributes. You would use the 'style' attribute and give it a value that is wrapped in quotes. Also, you need to have a semi-colon after each CSS '[property]: [value];' pair passed into the 'style' attribute, just like you would in a standard CSS stylesheet.

    <div>
       <h3 style="display: inline;">Kevin Smith</h3>
       <h2 style="display: inline;">The Official Kevin Smith Website</h2>
    </div>

Alternatively, you could assign a class to the parent 'div' element, such as 'title', and then style the 'h3' and 'h2' tags in your CSS stylesheet, like this:

HTML

    <div class="title">
       <h3>Kevin Smith</h3>
       <h2>The Official Kevin Smith Website</h2>
    </div>

CSS

    .title h2,
    .title h3 {
      display: inline;
    }

Answer 2

You need to use style attribute:

<div style="display:inline">

Answer 3

According to the spec, you're looking for display:run-in as described in this StackOverflow question. For you, that would look like:

h2 { display:run-in; }
p  { display:block; } // default

<h2>Kevin Smith</h2>
<p>The Official Kevin Smith Website</p>

Unfortunately, that code snippet won't work. That's because, practically, most of the browsers have abandonded display:run-in, even ones that previously had it. This feature is not ready for production. It's never been supported in Firefox, and it was removed from both Safari (v8) and Chrome (v32). It does, however, describe exactly the typographical behavior you're asking for.

This question gives links to other threads that have tried workarounds.