垂直放置一個div的高度要小於與其內聯的div的高度

Question

我有一個<div>分配高度的旁邊有一個<div>取決於文本的它的內部的量可變的高度。 我設法使它們彼此相鄰，而沒有最右邊的<div>文本環繞在左邊的<div>下方，但我不知道如何使左邊的<div>與文本對齊。右上/下<div>

我有的：

我想要的是

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

在這種情況下，您可以只使用vertical-align: top; 在您的圖標上。 JSFiddle 。

Answer 2

由於文本的行高，它沒有很好地對齊。

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

請注意，這不是一個很好的解決方案，因為每次更改字體大小，行高，字體系列等時，都必須更改邊距。