Im a beginner and recently made a chat application using React Js and Firebase. Im storing all the sent messages between 2 people in an array in a document field in firebase. So when I call on that array from the database, I split the messsages based on if the sender sent it or the receiver. I use a single div and its classname is based on who sent the msg, i.e. left side or right side. Im having problems keeping the right side messages on the right side. Initially, for the chat bubble width, I just used a max and min width. That caused all the widths to increase based on the lengthiest message, but atleast the left and right side messages were justified ( I moved the right side messages using margin left). But when I used width: 'max-content', the chat bubbles got fine but I was unable to move the right side bubbles on the right. Hope the question wasnt that confusing

 <div className='chat-section'>
                <div className='chat-messages' ref={messageEl}>
                   <h1><div className='receiver-info'>{receiver}</div></h1>
                    {receiver.length ? 
                    messages.map((message, index) => (
                    <div key={index} className={message.displayName === user.displayName ? 'right-side'
                    : message.displayName === receiver ? 'left-side'
                    : null }>
                    <p>{message.text}</p>
                    </div>
                    )) 
                    : <div className='empty-chat'><Empty
                    description={
                      <span>
                        Select a Friend to start chatting
                      </span>
                    }
                  /></div>} 
                </div>

and my css

.left-side {
    margin-bottom: 20px;
    margin-left: 20px;
    background-color: #fff;
    padding: 1.125em 1.5em;
    font-size: 1em;
    border-radius: 0 1rem 1rem 1rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
    border-bottom-color: #fff;
    filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, .1));
    width: fit-content;
    display: flex;
}
.right-side {
    position: relative;
    margin-left: 65%;
    width: fit-content;
    margin-bottom: 20px;
    background-color: rgb(151, 178, 250);
    padding: 1.125em 1.5em;
    font-size: 1em;
    border-radius: 1rem 0 1rem 1rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
    border-bottom-color: rgb(151, 178, 250);
    filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, .1));
}

This is the most I could manage and this is how it looks right now Image of Chat