How To Use Html/css To Align Chat Bubble Paragraphs?

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 ¦ ¦

Solution 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.5rem0.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(0px1px0px#DDD) drop-shadow(0px -1px0px#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(0px1px0px#AAD) drop-shadow(0px -1px0px#AAD);
  left: initial;
}

.bubblep {
  margin: 0;
}

<divid="chat-container"><divclass="bubble"><p>Hello Sam</p></div><divclass="bubble right"><p>Hello Frodo</p></div><divclass="bubble right"><p>Did you bring the ring?</p></div><divclass="bubble"><p>What ring?</p></div><divclass="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><divclass="bubble"><p>Shut up Sam!</p></div></div>