how to align avatar circle and text content css - html

Question

I want to align text content and the avatar circle. Here 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 shows like this here
I want to text and avatar circle should be bottom aligned. If I inspect element there is space on the top of text div. If I could remove this space problem will be solved. But I don't know how could I do that? Even changing the margin of text div not working? Any help?

Answer 1

As usual, what is a pain to achieve with traditional CSS (float, margin, inline-block, etc.) is a breeze with Flexbox.
.user-detail {
width: 300px;
height: 100px;
border: blue solid 2px;
display: flex;
align-items: center;
justify-content: center;
}
.user-detail>div {
border: green solid 2px;
}
.user-detail .details {
display: flex;
flex-direction: column;
}
<div class="user-detail right">
<div class="details">
<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>

Answer 2

You should use Flexbox is less pain.
Try making your
.user-detail {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
More about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

The vertical-align: top setting normally align and positions your div element to top , in your case the "Administrator" text.
You need to change your html as (check the second <div> tag in the below code for the change),
<div class="user-detail right">
<div style="display:inline-block;vertical-align: top">
<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>
Hope this helps!