How to align div tag left and right extreme?

Question

I have created chat app using socket.io but the messages from sender and receiver must by on extreme right and extreme left. How can I do that ? I have added the styles but the messages are not going one below the other instead they are going inline. How can I fix it ?

Code:

<div id="messages" className="card-block">
                            {this.state.messages.map((message, index) => {

                                let word = message.message.split('#')

                                if(word[0] === this.props.match.params.user){
                                    return (
                                        <div key={index} className="msgBoxRight"><p className="msgTextRight">{word[1]}</p></div>
                                    )
                                }else{
                                    return (
                                        <div key={index} className="msgBoxLeft"><p className="msgTextLeft">{word[1]}</p></div>
                                    ) 
                                }

                            })}
                        </div>

CSS:

#messages{
    height:300px;
    overflow: scroll;
    width: 100%;
}

.msgBoxRight {
    max-width: 350px;
    margin-top: 50px;
    float: right;
}

.msgTextRight {
    padding: 10px;
    background-color: #EBEEFD;
    border-radius: 25px;
}

.msgBoxLeft {
    max-width: 350px;
    margin-top: 10px;
    float: left;
}

.msgTextLeft {
    padding: 10px;
    background-color: #EBEEFD;
    border-radius: 25px;
}

Screenshot:

How it should display:

Answer 1

You can use Flexbox. And I think you don't need the div wrappers.

#messages {
  height: 300px;
  overflow: scroll;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.msgTextRight,
.msgTextLeft {
  max-width: 350px;
  background-color: #EBEEFD;
  border-radius: 25px;
  padding: 10px;
}

.msgTextRight {
  margin-top: 50px;
  margin-left: auto;
}

.msgTextLeft {
  margin-top: 10px;
  margin-right: auto;
}

<div id="messages" class="card-block">
   <p class="msgTextRight">hello Aditya</p>
   <p class="msgTextLeft">hello world</p>
   <p class="msgTextRight">i am varun</p>
   <p class="msgTextLeft">i am Aditya</p>
</div>

Answer 2

Add 'clear:both' to the elements you have floated, that is to classes '.msgBoxRight' and '.msgBoxLeft'.

#messages {
  height: 300px;
  overflow: scroll;
  width: 100%;
}

.msgBoxRight {
  max-width: 350px;
  margin-top: 50px;
  float: right;
  clear: both;
}

.msgTextRight {
  padding: 10px;
  background-color: #EBEEFD;
  border-radius: 25px;
}

.msgBoxLeft {
  max-width: 350px;
  margin-top: 10px;
  float: left;
  clear: both;
}

.msgTextLeft {
  padding: 10px;
  background-color: #EBEEFD;
  border-radius: 25px;
}

<div id="messages" class="card-block">
  <div class="msgBoxRight">
    <p class="msgTextRight">hello Aditya</p>
  </div>
  <div class="msgBoxLeft">
    <p class="msgTextLeft">hello world</p>
  </div>
  <div class="msgBoxRight">
    <p class="msgTextRight">i am varun</p>
  </div>
   <div class="msgBoxLeft">
    <p class="msgTextLeft">i am Aditya</p>
  </div>
</div>