You need to change the structure of your HTML so that each message and icon is wrapped in its own container, and both messages and replies are within the same container:
<div class="chat-container">
<div class="chthdr">
<h3>Chatkura</h3>
</div>
<div class="chtbd">
<div class="chtmsg-content">Hello! How can I help you today</div>
<div class="msg cht-tis">
<img class="usrpn" src="R.png" alt="user icon">
<div class="chtusr">
hello
</div>
</div>
<div class="msg cht-tis">
<img class="usrpn" src="icon.png" alt="user icon">
<div class="chtusr">
hello
</div>
</div>
<div class="msg cht-btreps">
<img src="icon.png" alt="bot icon">
<div class="chtmsg-reps">
hi
</div>
</div>
<div class="msg cht-btreps">
<img src="icon.png" alt="bot icon">
<div class="chtmsg-reps">
hi
</div>
</div>
</div>
</div>
Then update your CSS:
* {
margin: 0;
padding: 0;
}
body {
overflow-y: auto;
overflow-x: hidden;
}
.chat-container {
display: block;
overflow-y: auto;
overflow-x: hidden;
background-color: #1f7c22;
border-radius: 10px;
box-shadow: 20px 38px 40px rgba(0, 0, 0, 0.4);
width: 60%;
height: 100%;
margin: 15px auto;
font-family: Arial, sans-serif;
}
.chthdr {
text-align: center;
background-color: #36bbb033;
border-radius: 8px 8px 0 0;
padding: 15px;
border-bottom: 2px solid #dddddd;
}
.chtbd {
display: flex;
flex-direction: column;
gap: 5px;
padding: 15px;
height: 30vh;
overflow-x: hidden;
overflow-y: auto;
}
.chtmsg-content {
margin-bottom: 10px;
background-color: #ffffff;
border-radius: 8px;
width: max-content;
padding: 11px;
box-shadow: 10px 4px 31px rgba(0, 0, 0, 0.4);
display: inline-block;
}
img {
width: 30px;
margin-right: 5px;
height: fit-content;
}
.usrpn {
width: 27px;
border-radius: 14px;
border: 2px solid #ffffff;
}
.msg {
display: flex;
gap: 5px;
}
.cht-tis {
justify-content: right;
}
.chtusr {
background-color: #23a875;
border-radius: 10px;
padding: 15px;
box-shadow: 10px 0px 12px rgba(0, 0, 0, 0.4);
max-width: 70%;
align-self: flex-start;
}
.chtmsg-reps {
overflow-y: hidden;
overflow-x: hidden;
background-color: #c2c2c2;
border-radius: 9px;
padding: 10px;
box-shadow: 10px 4px 30px rgba(0, 0, 0, 0.4);
display: inline-block;
max-width: 75%;
}
Demo[
^]