html - 如何在图像旁边对齐多行文本而又不将其包裹在下面？

我已成功地将一行文本与图像对齐（fiddle）。

<div class="profile-details-wrapper">
  <img class="profile-picture" src="http://placehold.it/50x50" />
  <span class="profile-details">
    username
  </span>
</div>

但是，当我尝试添加另一行文本时，它会包装在图像下（fiddle）。

<div class="profile-details-wrapper">
  <img class="profile-picture" src="http://placehold.it/50x50" />
  <span class="profile-details">
    username
    <br />
    username
  </span>
</div>

我怎么能有多行文字，超过它旁边的图像高度，但不在它下面包装？
另外一个问题是：我怎样才能使它垂直对齐呢？

最佳答案

基于@freestock.tk的表格示例..

.profile-details-wrapper { display: table-row; }
.profile-picture {
  display: table-cell;
  vertical-align: top;
  margin-right: 10px;
}
.profile-details { display: table-cell; vertical-align: top; }

<div class="profile-details-wrapper">
  <img class="profile-picture" src="http://placehold.it/50x50">
  <div class="profile-details">
text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here
  </div>
</div>