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">