Text in full always to align to right of image responsively

Question

 .brand { font-size:1.2em; color:#777 !important; display:inline-block; vertical-align: middle; } .car { display:inline-block; vertical-align: middle; padding:5px 30px 0px 20px; } .car.img { margin:0 !important; width:100% !important; height:auto !important; } .date { text-align: right; font-size:14px; color: grey; } 

 <div id="wrapper"> <div class="car"> <img src="http://via.placeholder.com/100x100"> </div> <div class="brand"> BRAND BRAND BRAND BRAND HELLO <div class="date"> <time> 12 november 1865 </time> </div> </div> </div> 

If I add one more HELLO to my brand-title then the text is pushed below the image. How to make that when the brand-title becomes longer, that always it stays to the right of the image and vertically in the middle? Also for responsiveness it has to stay like this (NO float or flexbox please).

Answer 1

Many solutions. One is to use a table.

 .wrapper { display: table; } .brand { font-size:1.2em; color:#777 !important; display:table-cell; vertical-align: middle; } .car { display:table-cell; vertical-align: middle; padding:5px 30px 0px 20px; } .car.img { margin:0 !important; width:100% !important; height:auto !important; } .date { text-align: right; font-size:14px; color: grey; } 

 <div id="wrapper"> <div class="car"> <img src="http://via.placeholder.com/100x100"> </div> <div class="brand"> BRAND BRAND BRAND BRAND BRAND HELLO HELLO <div class="date"> <time> 12 november 1865 </time> </div> </div> </div> 

Or, clever use of widths.

 .brand { font-size:1.2em; color:#777 !important; display:inline-block; max-width: calc(100% - 100px - 20px - 30px - 1ch); /* width of window minus width taken up by left block */ vertical-align: middle; } .car { display:inline-block; vertical-align: middle; padding:5px 30px 0px 20px; } .car.img { margin:0 !important; width:100% !important; height:auto !important; } .date { text-align: right; font-size:14px; color: grey; } 

 <div id="wrapper"> <div class="car"> <img src="http://via.placeholder.com/100x100"> </div> <div class="brand"> BRAND BRAND BRAND BRAND BRAND HELLO HELLO <div class="date"> <time> 12 november 1865 </time> </div> </div> </div>