fixed-width and auto-width divs in one line - html

Question

I have chat window where I want to put photo and message next to photo. Conversation window must be responsive and message div auto-adjustable to the screen. But I can't find any way to do this, because once message has few lines of text, it drops to the next line.
If I use table, I can't make fixed-width photo TD. If I use DIVS, I can't do auto-width message DIV :)
Here is JSFiddle with an example:
https://jsfiddle.net/s95tdcLw/3/
HTML:
<div class="receiver">
<div class="receiverPhoto"></div>
<div class="receiverMessage">
Lorem ipsum dolor sit
</div>
</div>
<div class="receiver">
<div class="receiverPhoto"></div>
<div class="receiverMessage">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris eget est maximus condimentum nec a turpis.
</div>
</div>
<div class="receiver">
<div class="receiverPhoto"></div>
<div class="receiverMessage">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris eget est maximus condimentum nec a turpis. Nulla nulla est, feugiat vitae posuere et, efficitur ac justo. Suspendisse pulvinar, urna quis vehicula malesuada, lorem lacus luctus odio,
eu mattis nisi turpis vel lectus.
</div>
</div>
CSS:
.receiver {
clear: both;
padding-top: 1rem;
}
.receiverPhoto {
float: left;
width: 40px;
height: 40px;
background: blue;
border-radius: 20px;
}
.receiverMessage {
float: left;
width: auto;
background: rgb(230, 230, 230);
border-radius: 10px;
margin-left: 0.5rem;
padding: 10px;
}

Answer 1

Leave the float settings, use these instead:
.receiver {
position: relative;
}
.receiverPhoto {
position: absolute;
left: 0;
}
.receiverMessage {
margin-left: 45px;
}
jsFiddle

Answer 2

Your .receiverMessage element should not float and it should reserve left-margin space for the .receiverPhoto element.
.receiverMessage {
/* should not float */
width: auto;
background: rgb(230, 230, 230);
border-radius: 10px;
margin-left: 50px; /* reserve space of .receiverPhoto width */
padding: 10px;
}
See the forked Fiddle: https://jsfiddle.net/092b077c/
In response to your comment how to make it work for the opposite...
I'd use the classes on the wrapping div elements to determine the message type. In my example I introduce a new class .sender. Now I create four selectors that determine whether the photo element floats left or right and whether the message element has left or right padding:
New CSS:
.sender .receiverPhoto {
float: right;
}
.sender .receiverMessage {
margin-right: 50px;
}
.receiver .receiverPhoto {
float: left;
}
.receiver .receiverMessage {
margin-left: 50px;
}
HTML:
<div class="sender">
<div class="receiverPhoto"></div>
<div class="receiverMessage">...</div>
</div>
Now the .receiverPhoto and .receiverMessage styles do not need to declare margin or float.
See the updated Fiddle: https://jsfiddle.net/092b077c/1/