HTML
<div class="container--wrap">
<div id="rtitle">
<p id="ptitle" style="color: #D8DCE6; font-size: 30px; text-align: center; padding-top: 15px; font-weight: bolder; margin-bottom: 0;">INFO
<span id="fas" class="fas fa-info-circle w3-medium"></span></p>
</div>
</div>
CSS
#rtitle {
display: inline-block;
padding: 10px;
margin: 10px;
}
#fas {
font-size: 30px;
display: inline-block;
vertical-align: middle;
}
#ptitle {
vertical-align: middle;
display: inline-block;
}
.container--wrap {
background-color: #1B2435;
border-radius: 15px;
margin: 5px;
overflow: hidden;
justify-content: stretch;
align-items: flex-end;
}
The elements appear misaligned to the left, and I'm seeking guidance on how to properly align them. Can anyone provide assistance?
Your help is greatly appreciated - thank you!