title: css for chat room speech bubble position
body: <p>Hello I am trying to design a chat room and am stuck on the css of speech bubbles.</p>
  <p><strong>What I want</strong>
  Blue speech bubbles on the right and grey ones on the left.
  <a href="https://i.stack.imgur.com/Vuu2Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vuu2Z.png" alt="enter image description here" /></a></p>
  <p><strong>At the moment</strong>
  I tried several answers I found on SO like position relative/absolute. But none of the answers worked for me. If someone can help me here itd be great.
  <a href="https://i.stack.imgur.com/N94gT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N94gT.png" alt="enter image description here" /></a></p>
  <p><strong>Html</strong></p>
  <pre><code>&lt;div class=&quot;card-body p-3 pt-0&quot;&gt;
      &lt;div class=&quot;my-1 rounded-lg &quot;&gt;
          &lt;div class=&quot;position-relative w-100&quot;&gt;
  
              @foreach ($chats as $chat)
              &lt;p class=&quot;text-xs&quot;&gt;
                  {{$chat-&gt;created_at}} @ {{$chat-&gt;name}}
              &lt;/p&gt;
              &lt;div class=&quot;border-0 {{ $chat-&gt;user_identifier == 'SELF' ? 'chat-bubble-send' : 'chat-bubble-receive' }}&quot;&gt;
                  &lt;p class=&quot;text-sm &quot;&gt;
                      {{ $chat-&gt;message }}
                  &lt;/p&gt; 
              &lt;/div&gt;
              @endforeach
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>Css</strong></p>
  <pre><code>.chat-bubble-receive p {
      background: #42a5f5;
      color: #fff !important;
      border-radius: 20px 20px 3px 20px;
      display: block;
      max-width: 75%;
      padding: 7px 13px 7px 13px;
  }
  
  .chat-bubble-send p {
      background: #f1f1f1;
      color: #000 !important;
      border-radius: 20px 20px 20px 3px;
      display: block;
      max-width: 75%;
      padding: 7px 13px 7px 13px;
      position: absolute;
      left: 0;
  }
  
  .card-body {
      flex: 1 1 auto;
      padding: 1rem 1rem;
  }
  </code></pre>
  <p><strong>When the message is short</strong>
  <a href="https://i.stack.imgur.com/1mGRJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1mGRJ.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/VoxuU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VoxuU.png" alt="enter image description here" /></a></p>