Html 垂直定位一个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>

JSFiddle

---

在这种情况下，只需使用

垂直对齐：top
 由于文本的行高，它没有很好地对齐

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

请注意，这不是一个很好的解决方案，因为每次更改字体大小、行高、字体系列等时，都必须更改边距。
我认为空格是因为文本的行高。将页边距顶部添加到等于字体大小减去行高的数字/2将
页边距顶部添加到
。成功。circledNumber
似乎正在向下推较低的
s。你的意思是要换一个班吗？也许给课文加一个负页边空白就可以了。我来试试。这不是一个很好的解决方案，但确实有效。添加页边顶部：-2；这是其中一种显示表格数据的情况——这是表格的一个适当用例。BOOM perfect，works！干杯这么简单。编辑：将在1分钟内接受，等待计时器。使用固定值调整对齐方式，这是一个非常糟糕的解决方案。。。而且它与线高度几乎没有关系（在本例中）
.success .success-details{
  display: inline-block;
  white-space: normal;
  margin-top: -2px; /* 2 = (font-size - line-height) / 2  aprox. */
}