divs positioning for a chat message - css

Question

I want to create chat component in such a way that if I display all its elements it will look like the following:
and if I remove most of the elements, the message will be shown in this way:
However my code has 4 problems:
the picture and the bubble element are not next to each other
the speech bubble do not get shorter with less text;
the text in the bubble doesn't centre vertically on its parent div, rather on the upper parent container;
the day-time element stay fix on the right, rather than being aligned to the right side of the speech-bubble.
I tried many options, but the more I touch the CSS, the more issues I create.
Any suggestion on how to achieve the desired result?
This is my code:
.container {
position: relative;
margin-left: 5%;
max-width: 90%;
height: auto;
}
.upper-text {
width: 100%;
color: black;
font-size: 12px;
line-height: 120%;
}
.message-container {
width: auto;
}
.character-picture {
width: 30px;
height: 30px;
background-color: aqua;
display: inline-block;
}
.buble-wrapper {
max-width: 75%;
height: auto;
}
.speech-bubble {
background-color: #f0f0f0;
border-radius: 0 20px 20px 20px;
width: auto;
min-height: 40px;
}
.message {
color: black;
font-size: 16px;
padding-left: 4%;
padding-right: 4%;
top: 50%;
transform: translateY(-50%);
}
.lower-tex {
color: black;
font-size: 12px;
line-height: 120%;
text-align: right;
}
<div class="container">
<div class="upper-text">Name</div>
<div class="message-container">
<div class="character-picture"></div>
<div class="buble-wrapper">
<div class="speech-bubble">
<div class="message">text message</div>
</div>
</div>
</div>
<div class="lower-tex">Monday: 20:38</div>
</div>

Answer 1

This should do what you're looking for. There is a lot of room for improvement, but this will get you started.
I've removed some of the html you had that I thought unnecessary and changed how you size and place some elements.
I suggest you take a look at CSS Flexbox and Grid, they allow you to do complex layouts like this in a breeze.
.container {
width: auto;
max-width: 250px;
display: inline-flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.upper-text {
color: black;
font-size: 12px;
align-self: flex-start;
line-height: 1.5;
}
.message-container {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.character-picture {
width: 30px;
height: 30px;
background-color: aqua;
margin-right: 10px;
border-radius: 15px;
flex-shrink: 0;
}
.message {
color: black;
font-size: 16px;
word-wrap: break-word;
padding: 5px 10px;
border-radius: 15px;
background-color: #ccc;
display: flex;
align-items: center;
}
.lower-tex {
color: black;
font-size: 12px;
align-self: flex-end;
line-height: 2.5;
}
<div class="container">
<div class="upper-text">Name</div>
<div class="message-container">
<div class="character-picture"></div>
<div class="message">text message example wow this text wraps very well</div>
</div>
<div class="lower-tex">Monday: 20:38</div>
</div>

Answer 2

As mentioned by DoHn, you can achieve this using flex or grid.
Below is the solution using grid.
Read more here complete-guide-grid
For browser support, checkout https://caniuse.com/#search=grid
.container {
display: grid;
grid-template-columns: 30px auto;
grid-gap: 2px 4px;
width: 360px;
}
.upper-text {
color: black;
font-size: 12px;
line-height: 120%;
grid-column: 1 / 3;
grid-row: 1;
}
.message-container {
width: auto;
}
.character-picture {
width: 30px;
height: 30px;
background-color: aqua;
border-radius: 50%;
grid-row: 2;
}
.speech-bubble {
background-color: #f0f0f0;
border-radius: 0 20px 20px 20px;
grid-column: 2 / 3;
grid-row: 2;
justify-self: stretch;
display: grid;
padding: 10px;
}
.message {
margin: auto 0;
}
.lower-text {
color: black;
font-size: 12px;
line-height: 120%;
justify-self: end;
grid-column: 2 / 3;
grid-row: 3;
}
<div class="container">
<div class="upper-text">Name</div>
<div class="character-picture"></div>
<div class="speech-bubble">
<div class="message">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley o</div>
</div>
<div class="lower-text">Monday: 20:38</div>
</div>

Answer 3

.container {
width: 500px;
height: 100px;
padding: 10px;
}
.container .chat-log {
width: 500px;
height: 100px;
margin-top: 20px;
}
.left-side {
width: 20%;
height: auto;
float: left;
}
.right-side {
width: 80%;
height: auto;
position: relative;
left: -15px;
float: right;
}
.text {
font-size: 14px;
text-align: center;
}
.thumbnail {
width: 50px;
height: 50px;
background: #000;
border-radius: 50%;
clear: both;
margin: 0 auto;
position: relative;
}
.thumbnail span.caption {
color: #fff;
text-align: center;
position: relative;
margin: 0;
padding: 0;
top: 30%;
left: 10%;
}
.msg {
position: relative;
width: auto;
height: auto;
text-align: justify;
padding: 20px;
background-color: #f0f0f0;
border-radius: 0px 20px 20px;
}
.msg::before {
content: " ";
position: absolute;
bottom: 79%;
transform: rotate(90deg);
left: -20px;
border-width: 10px;
border-style: solid;
border-color: #f0f0f0 transparent transparent transparent;
}
.time{
float: right;
margin-right:10px;
font-size: 12px;
}
<div class="container">
<div class="chat-log">
<div class="left-side">
<div class="text">
Name
</div>
<div class="thumbnail">
<span class="caption">image</span>
</div>
</div>
<div class="right-side">
<div class="msg">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum tempore inventore architecto a voluptatum ratione, sunt doloribus nobis iure debitis? Veniam.
</div>
<div class="time">Monday 5:13 PM</div>
</div>
</div>
</div>
I hope this will help you. I do not use flexbox or grid I have made it simple.