How to align elemens inside <ol> with Numbering of <ol> when we have multiple elements inside <ol>

I need to make like this

enter image description here

with this mark-up

<ol>
    <li>
        <h2>Lorem ipsum dolor sit amet</h2> 
        <h3>consectetuer adipiscing elit</h3></li>
   <li>
        <h2>Lorem ipsum dolor sit amet</h2>
        <h3>consectetuer adipiscing elit</h3>
  </li>
   <li>
        <h2>Lorem ipsum dolor sit amet</h2>
        <h3>consectetuer adipiscing elit</h3>
  </li>
</ol>

But I'm unable to make H2, h3 inline with Digit

See Jsfiddle here http://jsfiddle.net/jitendravyas/ZaV3b/3/

Questions

Is my tag selection OK, or are there any better way?

How to get desired positioning?

You can try in my jS fiddle example

Solution

I think you are looking for this:

li {font-size:70px;padding-top:40px;}
h2 {font-size:30px;margin-top:-30px; position: absolute}
h3 {font-size:20px;margin-top:0;}

Give h2 an absolute position with negative margin-top.

See The Demo.