Hi I'm currently trying to float my icon element to the right, while maintaining how its centered vertically next to its sibling element. I know float and display: inline-block can't coexist with each other. I've already tried using direction: rtl and text-align: right for my icon. I also don't want to hardcode by using pixels with margins/paddings, since I want this to be mobile-responsive. Are there any ideas?
Here's what the HTML would look like:
<span class='container'>
<p class='text'>Here is a lot of text and it is meant to overflow.</p>
<icon class='caret'></icon>
</span>
Here's my current CSS:
.text{
width: 340px;
display: inline-block;
vertical-align: middle;
}
.caret{
color: gray;
display: inline-block;
vertical-align: middle;
//float: right; //doesn't work
}
Photo Example of Desired Result: 
