垂直定位高度小于div的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.