title: Chat message style
body: <p>I am Having a lof of problems trying to create a message card for my app. Basically I want to the content of the message div to be align with the name of the person,like this app .I already Tried to change the display to flex wrap,but still not the same, And I am looking if it's possible to re-create what this person did on the image here<a href="https://i.stack.imgur.com/GK47t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GK47t.png" alt="enter image description here" /></a></p>
  <p>Right now mine is this: <a href="https://i.stack.imgur.com/vX5OX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vX5OX.png" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }
  ::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
  }
  ::-webkit-scrollbar-thumb {
    background: #fc0303;
    border: 100px none #ffffff;
    border-radius: 7px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #fc0303;
  }
  ::-webkit-scrollbar-thumb:active {
    background: #000000;
  }
  ::-webkit-scrollbar-track {
    background: #191919;
    border: 100px none #ffffff;
    border-radius: 100px;
  }
  ::-webkit-scrollbar-track:hover {
    background: #191919;
  }
  ::-webkit-scrollbar-track:active {
    background: #333333;
  }
  ::-webkit-scrollbar-corner {
    background: transparent;
  }
    #menu_icon {
      width:40px;
      height:40px;
      border-radius:50%;
      transition: transform .9s;
      float:right
      
    }
    #menu_icon:hover {
      cursor:pointer;
        -ms-transform: scale(1.1); /* IE 9 */
    -webkit-transform: scale(1.1); /* Safari 3-8 */
    transform: scale(1.1); 
    }
    .chat_box{
      background-color:#191919;
      overflow: scroll;
     overflow-x: hidden;
      border: 2px black dashed;
      width:100%;
      height:100%;
      border-radius:3px;
      padding:10px;
    }
    .chat_box_message_content{
      display:block;
      
    }
    .msg-txt {
      display: flex;
      flex-flow: wrap column;
      width: 80%;
  }
      .chat_box_message_content p{
      color:white;
      
    }
    .chat_box_message_content img {
      width:35px;
      height:35px;
      border-radius:50%;
    }
    body {
    background: #eef0f1;
    color: black;
    font-family: "Roboto", sans-serif;
    overflow-x: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="chat_box" class="chat_box"&gt;
            &lt;img onclick="showMenu()" id="menu_icon" src="https://i.pinimg.com/736x/3f/e0/dc/3fe0dcb84367af59e8881edcb7747d58.jpg"&gt;
          
           &lt;p style="color:white;font-size:13px;font-style: oblique;margin-top:50px"&gt;Usuário Conectado ao servidor!&lt;/p&gt;
                      
      &lt;div class="chat_box_message_content"&gt;
      &lt;img src="https://i.pinimg.com/736x/3f/e0/dc/3fe0dcb84367af59e8881edcb7747d58.jpg"&gt;
                  &lt;span style="color:#9b72da" class="chat_box_message_content_icon"&gt;o&lt;/span&gt;  
                &lt;p class="chat_box_message_content_msg"&gt;
                   AAAAAAAAA
                &lt;/p&gt;   
                
            &lt;/div&gt;
                                        
      &lt;div class="chat_box_message_content"&gt;
      &lt;img src="https://i.pinimg.com/736x/3f/e0/dc/3fe0dcb84367af59e8881edcb7747d58.jpg"&gt;
                  &lt;span style="color:#da729f" class="chat_box_message_content_icon"&gt;Maria&lt;/span&gt;  
                &lt;p class="chat_box_message_content_msg"&gt;
                   teste
                &lt;/p&gt;   
                
            &lt;/div&gt;
                            &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Can U guys help me with it?</p>