msget

HTML :
<div class = "dashboard_msg">
    <div class = "msg-receive ">
        There are sometimes places where the fact that the logical and therefore reading order of flex items is separate from the visual order, is helpful. Used carefully the order property can allow for some useful common patterns to be easily implemented.
    </div>
    <div class = "msg-sent ">
        There are sometimes places where the fact that the logical and therefore reading order of flex items is separate from the visual order, is helpful. Used carefully the order property can allow for some useful common patterns to be easily implemented.
    </div>
    <div class = "msg-sent ">
        sdklfjsdklfjdslkjsdkl jfsdklj fsdlkjf sldkjf lskdjf lksdj flksdj lkfsdj flksdj lksfjdlkf jsdlk fjsdlkjf sldkjf
    </div>
    <div class = "msg-receive ">
        There are sometimes places where the fact that the logical and therefore reading order of flex items is separate from the visual order, is helpful. Used carefully the order property can allow for some useful common patterns to be easily implemented.
    </div>
</div>
CSS :
.msg-receive {
  margin: 5px 5px;
  background-color: white;
  border-top-left-radius: 50px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 20px;
  max-width: 40vw;
  align-self: flex-start;
}

.msg-sent {
  margin: 5px 5px;
  background-color: #0084db;
  border-top-right-radius: 50px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  padding: 20px;
  max-width: 40vw;
  align-self: flex-end;
}

.dashboard_msg {
  background-color: gray;
  display: flex;
  flex-direction: column;
}