How can I make this text and image not overlap

I know this looks very simple, but I have been trying to figure out a solution for an hour now. I have an "a" element with text and an image inside. The problem is that the image goes below the text, and I want them lined up.

HTML code:

 <!-- Header right part --> 
            <div class="dropdown">
                <a>
                    User123
                    <img src="Images/Icons/user.svg" id="nav-user-logo" alt='User123'>
                </a>
                <div class="dropdown-content user-dropdown-content" >
                    <a>AW Admin</a>
                    <a>Account Settings</a>
                    <a>Change Password</a>
                    <a>Logout</a>
                </div>
            </div>

Relevant CSS:

a {
    text-decoration: none;
    color: #fff;
}

a:hover {
    color: #ff5c33;
    text-decoration: none;
    cursor: pointer;
}

#nav-user-logo{
    max-height: 16px;
}