How to make border as big as text in it - html

Question

So it looks like this:
this is the example code of a message:
.allMsg {
width: 100%;
}
.self {
border-radius: 1rem;
background-color: #28a745;
text-align: right;
padding-left: 5px;
padding-right: 5px;
margin-left: 5px;
margin-right: 5px;
}
.friend {
text-align: left;
}
#chatWith {
text-align: center;
font-family: sans-serif;
font-size: 40px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
<div class='allMsg'>
<p class='self chatMsg'>Hello</p>
</div>
How can i make the border as big as the text inside ... I thought the padding was going to work but unfortunately it didn't so please help me.

Answer 1

It's possible if you wrap your messages inside another element. So let's say all messages have a full-width element, but friends messages will aligned to the left and have a blue background, while yours will aligned to the right and have a green background. If you don't want to change your markup so much, the easiest is to wrap your messages inside a span, than you doesn't need to change anything else in your html.
.allMsg {
width: 100%;
}
.self span, .friend span {
border-radius: 1rem;
padding-left: 5px;
padding-right: 5px;
margin-left: 5px;
margin-right: 5px;
}
.self span {
background-color: #28a745;
}
.friend span {
background-color: #2845a7;
}
.self {
text-align: right;
}
.friend {
text-align: left;
}
<div class='allMsg'>
<p class='chatMsg friend'>
<span>hello</span>
</p>
<p class='chatMsg self'>
<span>hy</span>
</p>
<p class='chatMsg friend'>
<span>how are you friend?</span>
</p>
<p class='chatMsg self'>
<span>i'm fine thanks</span>
</p>
</div>

Answer 2

You could use flexbox on the container:
.allMsg {
width: 100%;
display: flex;
flex-flow: column nowrap;
align-items: flex-end;
}
Example:
.allMsg {
width: 100%;
display: flex;
flex-flow: column nowrap;
align-items: flex-end;
}
.self {
border-radius: 1rem;
background-color: #28a745;
text-align: right;
padding-left: 5px;
padding-right: 5px;
margin-left: 5px;
margin-right: 5px;
}
.friend {
text-align: left;
}
#chatWith {
text-align: center;
font-family: sans-serif;
font-size: 40px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
<div class='allMsg'>
<p class='self chatMsg'>Hello</p>
<p class='self chatMsg'>This is a test</p>
</div>