Impossible d'obtenir l'icône de police génial à aligner à côté de nom d'utilisateur

Question

Je suis sûr que je manque quelque chose de simple, mais j'essaie d'obtenir mon icône de police génial pour aligner juste à la droite du «nom d'utilisateur».

Mon html ressemble à ceci:

<div class="vue-dropdown"> 
    <div> 
    USERNAME 
    <i aria-hidden="true" class="icon-caret-right"></i> 
    </div> 
    <div class="options"><a href="/admin" target="_blank">Admin</a><a href="/impersonate/search/" target="_blank">Impersonate</a></div> 
</div> 

J'ai quelques CSS mis à tourner l'icône pour faire face vers le bas lorsque le menu déroulant est affiché - mais l'icône apparaît sous le nom d'utilisateur.

.vue-dropdown { 
    position: relative; 
    display: inline-block; 
} 

.options { 
    display: none; 
    position: absolute; 
    right: 0; 
    min-width: 125px; 
    box-sizing: border-box; 
    box-shadow: 0px 2px 6px #c3c3c3; 
    z-index: 1; 
    max-height: 11em; 
    height: auto; 
} 


/* Links inside the dropdown */ 

.options a { 
    background-color: white; 
    color: black!important; 
    display: block; 
    padding: 8px; 
    height: auto; 
    border-bottom: 1px solid #ddd; 
} 


/* Change color of dropdown links on hover */ 

.options a:hover { 
    background-color: #f1f1f1 
} 


/* Show the dropdown menu on hover */ 

.vue-dropdown:hover .options { 
    display: block; 
} 

.vue-dropdown:hover .icon-caret-right { 
    color: red; 
    display: block; 
    transition: 0.5s; 
    width:10px; 
    height:10px; 
    -ms-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); 
    transform: rotate(90deg); 
} 

.vue-dropdown .icon-caret-right { 
    display: block; 
    transition: 0.5s; 
    width:10px; 
    height:10px; 
} 

J'ai un fiddle of it here

Answer 1

Vous avez juste besoin pour changer l'affichage du bloc au bloc en ligne comme ci-dessous (travail du violon attaché).

.vue-dropdown:hover .icon-caret-right { 
    display: inline-block; 
} 

.vue-dropdown .icon-caret-right { 
    display: inline-block; 
} 

https://jsfiddle.net/knfxvw96/3/

Answer 2

Voici le violon: https://jsfiddle.net/derrysan7/knfxvw96/1/

Juste envelopper USERNAME dans la balise span, ajoutez display:inline-block, puis ajoutez display:inline-block à l'étiquette icône i