Question

This is the Fiddle.

I want to make it so that the arrow goes to the right of the name, no matter how big the name is.

The arrow isn’t being placed properly, and I have been struggling to figure it out.

I know it’s super simple CSS, but I’m just having trouble with this one.

Thanks for all your answers!

#menu #container #right_menu_options #user span.arrow{
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid white;
        float: right;
        position: absolute;
        margin-top: 8px;
    }

Answer 1

Do it like this

Demo

CSS

#menu #container #right_menu_options #user span.arrow{
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid white;
    position: absolute;
    right: 3px;
    top: 17px;
}
#menu #container #right_menu_options #user p{
    margin-top: 9px;
    position: relative;
    padding-right: 10px;       
}