title: Chat system align
body: <p><strong>(see Update at the bottom for a live demo of what I want)</strong></p>
  
  <p>I have an online game with a chat system, but the CSS suck.</p>
  
  <p><strong>Example with images:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/4z2Kv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4z2Kv.png" alt="What I want"></a></p>
  
  <p><a href="https://i.stack.imgur.com/g6mp7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g6mp7.png" alt="problem with absolute"></a></p>
  
  <p><a href="https://i.stack.imgur.com/JJKkX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JJKkX.png" alt="without absolute"></a></p>
  
  <p><strong>And two code example</strong>
  Here I have used absolute with the position of the user, and the speech can be going on others speech.</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>.speech-container {
    position:absolute;
    top:0;
    left:0;
    height:250px;
    background:rgba(0,0,0,.15);
    width:100%;
  }
  
  .speech {
    background:white;
    border:1px solid brown;
    padding:10px;
    border-radius:5px;
    position:absolute;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="speech-container"&gt;
    &lt;div class="speech red" style="left:20px;top:10px"&gt;
      &lt;span&gt;&lt;b&gt;User1:&lt;/b&gt; Test&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="speech red" style="left:20px;top:60px"&gt;
      &lt;span&gt;&lt;b&gt;User1:&lt;/b&gt; Test&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="speech blue" style="left:120px;top:10px"&gt;
      &lt;span&gt;&lt;b&gt;User2:&lt;/b&gt; Hi&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="speech blue" style="left:120px;top:60px"&gt;
      &lt;span&gt;&lt;b&gt;User2:&lt;/b&gt; Hi&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="speech blue" style="left:120px;top:110px"&gt;
      &lt;span&gt;&lt;b&gt;User2:&lt;/b&gt; Testttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="speech blue" style="left:120px;top:160px"&gt;
      &lt;span&gt;&lt;b&gt;User2:&lt;/b&gt; Hi&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="speech blue" style="left:20px;top:110px"&gt;
      &lt;span&gt;&lt;b&gt;User1:&lt;/b&gt; Testtttttttttttttttttttttttttttttttttttt (pronounced after the user2 speech)&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="speech blue" style="right:20px;top:15px"&gt;
      &lt;span&gt;&lt;b&gt;User3:&lt;/b&gt; Test&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>And 'what I want' demo</strong>
  Here I have what I want but with absolute, isn't possible to use flex and absolute for a column system?</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>.speech-container {
    position:absolute;
    top:40px;
    left:0;
    height:250px;
    background:rgba(0,0,0,.15);
    width:100%;
  }
  
  .speech {
    background:white;
    border:1px solid brown;
    padding:10px;
    border-radius:5px;
    position:absolute;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="speech-container"&gt;
    &lt;div class="speech red" style="left:20px;top:10px"&gt;
      &lt;span&gt;&lt;b&gt;User1:&lt;/b&gt; Test&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="speech red" style="left:20px;top:60px"&gt;
      &lt;span&gt;&lt;b&gt;User1:&lt;/b&gt; Test&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="speech blue" style="left:120px;top:10px"&gt;
      &lt;span&gt;&lt;b&gt;User2:&lt;/b&gt; Hi&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="speech blue" style="left:120px;top:60px"&gt;
      &lt;span&gt;&lt;b&gt;User2:&lt;/b&gt; Hi&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="speech blue" style="left:120px;top:110px"&gt;
      &lt;span&gt;&lt;b&gt;User2:&lt;/b&gt; Testttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="speech blue" style="left:120px;top:210px"&gt;
      &lt;span&gt;&lt;b&gt;User2:&lt;/b&gt; Hi&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="speech blue" style="left:20px;top:160px"&gt;
      &lt;span&gt;&lt;b&gt;User1:&lt;/b&gt; Testtttttttttttttttttttttttttttttttttttt (pronounced after the user2 speech)&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="speech blue" style="right:20px;top:15px"&gt;
      &lt;span&gt;&lt;b&gt;User3:&lt;/b&gt; Test&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;b&gt;What I expect, use flex maybe?&lt;/b&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>UPDATE:</strong> I have finded a game with what I want <code>(Habbo)</code>.</p>
  
  <p><strong>GIF:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/xk6ig.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xk6ig.gif" alt="Live demo wanted"></a></p>
  
  <p>How can I fix that?</p>