I am looking to properly align the text content and the avatar circle. Below are the classes that I have defined
.user-detail {
display: inline-block;
text-transform: uppercase;
text-align: right;
.user-detail__username {
margin: 18px 16px 0px 10px;
display: block;
float: left;
font-size: $font-size;
font-weight: 500;
}
.user-detail__role {
margin: 18px 16px 0px 10px;
display: block;
font-size: $font-size * 0.9;
font-style: normal;
line-height: 13px;
font-weight: 300;
}
.user-detail__avatar-circle {
display: inline-block;
margin: 8px 11px 0px 0px;
width: 45px;
height: 45px;
border-radius: 50%;
border: 1px solid $lightstroke;
}
.user-detail__avatar {
position: relative;
font-size: 51px;
line-height: 43px;
left:-4px;
}
}
and here is the HTML markup
<div class="user-detail right">
<div style="display:inline-block">
<span class="user-detail__username">
Adminstrator
</span>
<span class="user-detail__role">Adminstrator</span>
</div>
<div class="user-detail__avatar-circle">
<i class="material-icons user-detail__avatar">account_circle</i>
</div>
</div>
it appears like this here
https://i.sstatic.net/i9Nt2.png
In order to achieve my desired look, I need the text and avatar circle to be bottom aligned. Upon inspecting the element, I noticed some space on top of the text div. I have attempted to adjust the margin of the text div but it does not seem to resolve the issue. Any suggestions on how to address this spacing problem?