Chat system align

Question

(see Update at the bottom for a live demo of what I want)

I have an online game with a chat system, but the CSS suck.

Example with images:

And two code example Here I have used absolute with the position of the user, and the speech can be going on others speech.

.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;
}

<div class="speech-container">
  <div class="speech red" style="left:20px;top:10px">
    <span><b>User1:</b> Test</span>
  </div>
  <div class="speech red" style="left:20px;top:60px">
    <span><b>User1:</b> Test</span>
  </div>
  <div class="speech blue" style="left:120px;top:10px">
    <span><b>User2:</b> Hi</span>
  </div>
  <div class="speech blue" style="left:120px;top:60px">
    <span><b>User2:</b> Hi</span>
  </div>
  <div class="speech blue" style="left:120px;top:110px">
    <span><b>User2:</b> Testttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</span>
  </div>
  <div class="speech blue" style="left:120px;top:160px">
    <span><b>User2:</b> Hi</span>
  </div>
  <div class="speech blue" style="left:20px;top:110px">
    <span><b>User1:</b> Testtttttttttttttttttttttttttttttttttttt (pronounced after the user2 speech)</span>
  </div>
  <div class="speech blue" style="right:20px;top:15px">
    <span><b>User3:</b> Test</span>
  </div>
</div>

And 'what I want' demo Here I have what I want but with absolute, isn't possible to use flex and absolute for a column system?

.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;
}

<div class="speech-container">
  <div class="speech red" style="left:20px;top:10px">
    <span><b>User1:</b> Test</span>
  </div>
  <div class="speech red" style="left:20px;top:60px">
    <span><b>User1:</b> Test</span>
  </div>
  <div class="speech blue" style="left:120px;top:10px">
    <span><b>User2:</b> Hi</span>
  </div>
  <div class="speech blue" style="left:120px;top:60px">
    <span><b>User2:</b> Hi</span>
  </div>
  <div class="speech blue" style="left:120px;top:110px">
    <span><b>User2:</b> Testttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</span>
  </div>
  <div class="speech blue" style="left:120px;top:210px">
    <span><b>User2:</b> Hi</span>
  </div>
  <div class="speech blue" style="left:20px;top:160px">
    <span><b>User1:</b> Testtttttttttttttttttttttttttttttttttttt (pronounced after the user2 speech)</span>
  </div>
  <div class="speech blue" style="right:20px;top:15px">
    <span><b>User3:</b> Test</span>
  </div>
</div>

<b>What I expect, use flex maybe?</b>

UPDATE: I have finded a game with what I want (Habbo).

GIF:

How can I fix that?

Answer 1

Try this !

https://jsfiddle.net/xstjqy8r/

.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;
  display:block;
  width:60%;
  float:left;
}

.speech.blue {
  float:right;
}

.container-left {
  width:300px;
  display:block;
  position:absolute;
}

.container-right {
  width:300px;
  display:block;
  position:absolute;
  right:0px;
}

<div class="speech-container">
  <div class="container-left">
 
  <div class="speech red" style="left:20px;top:10px">
    <span><b>User1:</b> Test</span>
  </div>
  <div class="speech red" style="left:20px;top:60px">
    <span><b>User1:</b> Test</span>
  </div>
  <div class="speech blue" style="left:120px;top:10px">
    <span><b>User2:</b> Hi</span>
  </div>
  <div class="speech blue" style="left:120px;top:60px">
    <span><b>User2:</b> Hi</span>
  </div>
  <div class="speech blue" style="left:120px;top:110px">
    <span><b>User2:</b> Testttttt</span>
  </div>
  <div class="speech blue" style="left:120px;top:210px">
    <span><b>User2:</b> Hi</span>
  </div>
  <div class="speech red" style="left:20px;top:160px">
    <span><b>User1:</b> Testtttttt</span>
  </div>
  
  </div>
  <div class="container-right">
  <div class="speech blue" style="right:20px;top:15px">
    <span><b>User3:</b> Test</span>
  </div>
    </div>
</div>