CSS boxes has arrows except one - html

Question

I am creating a messaging system where one user speaks to the other. I have created message boxes with the arrows. So far all the boxes has arrows except one (see pics below). Also the height is not auto adjusting to the content. Can someone take a look at my code to see what is going on?
HTML
<div class="col-xs-7 live-chat-feed">
<div class="chat-date"><p>Friday 12:34</p></div>
<div class="user-post">
<div class="chat-avatar">
<img src="img/bitmap(3).png"
srcset="img/bitmap(3)#2x.png 2x,
img/bitmap(3)#3x.png 3x"
class="Bitmap"><p class="time-posted">12:47</p>
</div>
<div class="single-post-box">
<p class="chat-content">
Hey there! <br>
I noticed that not only are you a football fan
but you also go to a lot of games! What do you think about the upcoming season and who is your favorite team? Looks to me like you are a Pats fan!</p>
</div>
</div>
<div class="new-live-chat">
<div class="chat-date"><p>Saturday 22:40</p></div>
<div id="current-user">
<div class="user-post">
<div class="chat-avatar">
<img src="img/bitmap-copy.png"
srcset="img/bitmap-copy#2x.png 2x,
img/bitmap-copy#3x.png 3x"
class="Bitmap"><p class="time-posted">12:47</p>
</div>
<div class="single-post-box">
<p class="chat-content">
Wow! That’s awesome. I love football and im a beat writer for the Pats & have the luxury of catching their games!</p>
</div>
<div class="single-post-box">
<p class="chat-content">
What about you? Are you a Pats fan yourself?</p>
</div>
</div>
</div>
<div class="user-post">
<div class="chat-avatar">
<img src="img/bitmap(3).png"
srcset="img/bitmap(3)#2x.png 2x,
img/bitmap(3)#3x.png 3x"
class="Bitmap"><p class="time-posted">12:47</p>
</div>
<div class="single-post-box">
<p class="chat-content">
Oh yeah! Brady with the SB win again this year! </p>
</div>
</div>
<div id="current-user">
<div class="user-post">
<div class="chat-avatar">
<img src="img/bitmap-copy.png"
srcset="img/bitmap-copy#2x.png 2x,
img/bitmap-copy#3x.png 3x"
class="Bitmap"><p class="time-posted">12:47</p>
</div>
<div class="single-post-box">
<p class="chat-content">
Thats pretty cool! No idea how much of a Pats fan you were to already have season tix! I dont even have them yet!</p>
</div>
</div>
</div>
</div>
CSS
.live-chat-feed {
margin-left: 50%;
margin-top: -310%;
background-color: #000;
}
.new-live-chat {
margin-top: 20%;
}
.chat-avatar {
position: relative;
left: -30%;
top: 85px;
}
.chat-date,
.chat-content,
.time-posted {
color: #8785ab;
}
.chat-date {
position: relative;
left: 30%;
}
.single-post-box {
width: 729.9px;
height: auto;
border-radius: 2px;
background-color: #ffffff;
box-shadow: 0 2px 4px 0 rgba(167, 169, 197, 0.55);
margin-bottom: 10%;
padding: 20px;
}
#current-user .single-post-box {
position: relative;
left: -15%;
border-radius: 2px;
background-color: #1ac384;
box-shadow: 0 2px 4px 0 rgba(167, 169, 197, 0.55);
}
.single-post-box::after {
content: '';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-right-color: #fff;
right: 97.5%;
top: 115px;
}
#current-user .single-post-box::after {
content: '';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-left-color: #1ac384;
left: 100%;
top: 0px;
}

Answer 1

I always use height: inherit; for height property. It will create a box containing the the text without any free space at the bottom. So if you have like text of 3 rows it will create a height like 20% or something, if you have 6 rows, it will create height of 40%, etc. Hope that helps.