Vertically positioning a div with a smaller height than a div it is inline with

Question

I have a <div> of assigned height next to a <div> of variable height depending on the amount of text inside of it. I've managed to get them next to eachother without the right-most <div> 's text wrapping around and underneath the left <div> , but I can't figure out how to get the left <div> to align with the top/start of the right <div>

What I have:

What I want

HTML

<div class='success'>
              <span class='introduction'><h4>Some instructions:</h4></span>
                  <div class='success-instruction'>
                    <div class='circledNumber'>1</div>
                    <div class='success-details'>
                      <h4>Do stuff:</h4>
                      Assign devlepment devices, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                  </div>
                  <div class='success-instruction'>
                    <div class='circledNumber'>2</div>
                    <div class='success-details'>
                      <h4>Set up Things:</h4>
                      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                    </div>
                  </div>
                  <div class='success-instruction'>
                    <div class='circledNumber'>3</div>
                    <div class='success-details'>
                      <h4>Be a hero: </h4>
                      Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
                    </div>
                  </div>
</div>

CSS

.success { 
 display: block;
}
.success .introduction{
  margin-bottom: 10px;
  margin-top: 10px;
  display: block;
}

.success  .success-instruction {
  margin-bottom: 5px;
  white-space: nowrap;
}
.success  .circledNumber {
  display: inline-block;
  background-color: orange;
  color: white;
  margin-right: 12px;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  text-align: center;

}

.success .success-details{
  display: inline-block;
  white-space: normal;
}

.success h4{
  display: inline;
  font-size: inherit;
}

JSFiddle
https://jsfiddle.net/3wbcunm7/1/

Answer 1

In this instance you can get away with just using vertical-align: top; on your icons. JSFiddle .

Answer 2

It's not well aligned because of the line-height of the text.

.success .success-details{
  display: inline-block;
  white-space: normal;
  margin-top: -2px; /* 2 = (font-size - line-height) / 2  aprox. */
}

Note that this is not a very good solution since you will have to change the margin every time you change the font-size, line-height, font-family, etc.