I have made some modifications to your code to hide the 2nd paragraph (message) by default and reveal it with a slide effect upon clicking the blue circle.
Some of the styling on the paragraph seemed unnecessary, so I removed it. The parent div will automatically expand to fit its contents, eliminating the need for overflow hidden.
It looked like there was some unnecessary JavaScript code, so I simplified it to just toggle the visibility of the paragraph. Additionally, I added more semantic classes to the HTML paragraphs.
Below is the updated code snippet:
$(document).ready(function() {
$('.downarrow').on("click", function() {
$('.added-msg-content').slideToggle();
});
});
.added-msg2 {
padding: 3% 1%;
float: left;
width: 100%;
box-sizing: border-box;
font-size: 14px;
color: #333333;
position: relative;
background-color: #e0e0e0;
}
.added-msg-inner {
float: left;
width: 100%;
}
.downarrow {
position: absolute;
right: 15px;
bottom: -12px;
z-index: 1;
width: 30px;
height: 30px;
line-height: 30px;
font-size: 18px;
color: #fff;
background-color: #003478;
border-radius: 50%;
text-align: center;
font-weight: bold;
cursor: pointer;
}
.added-msg-content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="added-msg2">
<div class="added-msg-inner">
<p class="added-msg-author">Message added by agent user on<br> Sat, Jun 24th, 2017 (5:03AM)</p>
<p class="added-msg-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries</p>
<p><i class="fa fa-paperclip" aria-hidden="true"></i> ABCFileName.pdf</p>
</div>
<div class="downarrow"><i class="fa fa-angle-down" aria-hidden="true"></i></div>
</div>