How can I align multi-line text next to an image without it wrapping underneath?

Question

I've successfully aligned one line of text with an image ( fiddle ).

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

However, when I try to add another line of text, it wraps under the image ( fiddle ).

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

How can I have multi-line text that exceeds the height of the image next to it, but does not wrap underneath it?

Bonus question: How would I go about aligning it vertically, too?

Answer 1

Building on @freestock.tk's tabular example..

 .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> 

Answer 2

 img { float:left; margin-top: 5px; margin-right: 15px; margin-bottom: 15px; } p { display: table-cell; width: 400px; } 

 <div class="profile-details-wrapper"> <img class="profile-picture" src="http://placehold.it/50x50" /> <span class="profile-details"> <p>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 </p> </span> </div> 

Answer 3

How about giving a float: left; tag to both the picture and the description. I don't Know if that creates complications in your website but that way it will keep all the text on the left side

Answer 4

This is a bit hackish, but it should work...

 .profile-picture { display: block; margin: 0 10px 10px 0; float: left; } .profile-details { float: left; width: calc(100% - 50px - 10px); } 

 <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>