How do I make aligning chat messages?

Question

I thought this would be easy but I guess not... I want to align chat messages, when they show up they are not aligned correctly, they are in a line. I tried using margin but it's not working. The bot messages should float to the right and have even space in between each message, same for the user msg.
https://code.sololearn.com/W1aXlHQlxI5g/?ref=app

Answer 1

Hira Ali ❤ hello,
When you give a float:right every following element will come surrounding it (untill you use the clear property).
As in your function you create every div with that property , each time it is called, the element is positioning that way.
If you remove the float in usermsg class and modify text-align:right in pmsg class it will work as you want I think.

Answer 2

EmmanueLZ. Thank you!!

Answer 3

You're welcome.
About your bot messages, i'm not sure how you'll handle its answers, so once you'll code a little more about that, feel free to ask again if there is some trouble.

Answer 4

EmmanueLZ. I got the JS figured out, but thank you.