How to use html/css to align chat bubble paragraphs?

Question

So I want to have a paragraph that could be one or more lines long that is on the right side of the page but is left aligned.

Example:

|              Example text to show |
|              where I want the     |   <-- Right side of page
|              paragraph to be.     |

So I added a left margin and told the text to align to the left:

<p style="text-align: left; margin-left:>Text</p>

This works for long paragraphs; however, if the paragraph is less that a line long, it looks like this:

  |              Short Text           |
  |                                   |   <-- Right side of page
  |                                   |

instead of:

  |                         Short Text|
  |                                   |   <-- Right side of page
  |                                   |

I then tried aligning the paragraph to the right and aligning the last line to the left:

<p style="text-align: right;text-align-last: left; margin-left: 200px">Text</p>

However, that resulted in text over-hanging:

|               Example text to show|
|                   where I want the|   <-- Right side of page
|              paragraph to be.     |

Is there any way I can get the paragraph to be on the right of the page with all the lines lined up like in the first example, but not so that a short line will not be left in the middle of the page?

Answer 1

So, initially I hadn't understood your question correctly, but with your additional comments I reworked my answer and adjusted it to what you explained. I think it wasn't really clear in your question you needed that for a chat. I made an example with chat bubbles, the points are not ideal, just playing around :). But I think this solves your problem.

Basically you can't use just p elements for this, you need a main container and a container for each message and you use flex and align-self on each inner container. Check the running example.

#chat-container {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.bubble {
  border: solid 1px #DDD;
  background: #EEE;
  margin-bottom: 0.25rem;
  max-width: 60%;
  align-self: flex-start;
  padding: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.75rem;
  position: relative;
}

.bubble::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
  height: 0;
  border: 12px solid transparent;
  border-right-color: #EEE;
  border-left: 0;
  border-top: 0;
  margin-top: -6px;
  margin-left: -12px;
  filter: drop-shadow(0px 1px 0px #DDD) drop-shadow(0px -1px 0px #DDD);
}

.bubble.right {
  border-color: #AAD;
  background: #EEF;
  align-self: flex-end;
}

.bubble.right::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 12px solid transparent;
  border-left-color: #EEF;
  border-right: 0;
    border-top: 0;
  margin-top: -6px;
  margin-right: -12px;
  filter: drop-shadow(0px 1px 0px #AAD) drop-shadow(0px -1px 0px #AAD);
  left: initial;
}

.bubble p {
  margin: 0;
}

<div id="chat-container">
  <div class="bubble">
      <p>Hello Sam</p>
  </div>

  <div class="bubble right">
      <p>Hello Frodo</p>
  </div>

  <div class="bubble right">
      <p>Did you bring the ring?</p>
  </div>

  <div class="bubble">
      <p>What ring?</p>
  </div>

  <div class="bubble right">
      <p>The ring Frodo! The one that says Ash nazg durbatul?k, ash nazg gimbatul, Ash nazg thrakatul?k agh burzum-ishi krimpatul when heated.</p>
  </div>

  <div class="bubble">
      <p>Shut up Sam!</p>
  </div>
</div>