Are you finding this information useful?
* { box-sizing: border-box; } body{ overflow-y: scroll; overflow-x: hidden; width: 100%; flex: 1; min-height: 580px; height: 100%; width: 270px; background-color: #f4f4f4; } .user-bar{ height: 35px; width: 35px; background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwxLzR_wVDg6DKEiQ90XGffgrZLF7_s_vaPA&usqp=CAU%27'); background-repeat: no-repeat; background-position: right; margin-right: 10px; float: right; }
.bot-bar{ height: 35px; width: 35px; background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhgCkQbZmKeeMEys7nRNSem1zMFlYODegmmw&usqp=CAU%27'); background-repeat: no-repeat; margin-left: 5px; margin-top: -40px;}
.user-box { margin-top: 5px; border-radius: 12px 0 8px 12px; padding: 8px 8px; width: max-content; max-width: 170px; background-color: rgb(0,58,111); color:#fff; margin: 5px; text-align: left; font-size: 13px; font-family: arial; position: relative; box-shadow: 1px 1px 2px 2px #cbe9ff; white-space: normal; word-wrap: break-word; float: right; font-family: Calibri, "Helvetica Neue", Arial, sans-serif !important; font-weight: 100 ; }
.response-box { margin-top: 15px; border-radius: 0 12px 12px 8px; border: 1px solid; padding: 8px 8px; display: block; text-align: left; width: max-content; max-width: 220px; background-color: #ffff; color: #156c8a; position: relative; clear: right; margin:5px; font-size: 13px; font-family: arial; box-shadow: 1px 1px 1px 1px #ccc; white-space: normal; word-wrap: break-word; margin-left: 46px; font-family: Calibri, "Helvetica Neue", Arial, sans-serif !important; font-weight: 100px ; }
<body>
<div class="user-bar"></div>
<p class="user-box">hi</p>
<p class="response-box">Hi! I'm your virtual assistant!</p>
<div class="bot-bar"></div>
<p class="response-box">How May I help you?</p>
<div class="bot-bar"></div>
<div class="user-bar"></div>
<p class="user-box">login issue</p>
<p class="response-box">sure I can help you with this</p>
<div class="bot-bar"></div>
<p class="response-box">Please confirm your email id.</p>
<div class="bot-bar"></div>
</body>
Modifications
1.
<div class="bot-bar"></div>
should be placed after each
<p class="response-box"></p>
2. Added
margin-top: -40px;
to the
.bot-bar
style
3. Changed
margin-left: 40px;
in the
.response-box
style to
margin-left: 46px;