How can I make this text and image not overlap - html

Question

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.
a {
text-decoration: none;
color: #fff;
}
a:hover {
color: #ff5c33;
text-decoration: none;
cursor: pointer;
}
#nav-user-logo{
max-height: 16px;
}
<!-- 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>

Answer 1

I didn't have the issue myself but you can do
#nav-user-logo {
max-height: 1em;
display: inline;
}
to guarantee it is inline with the text.

Answer 2

By defect, any browser, with your css will display the image side by side as, I think, you want:
example with your code:
a {
text-decoration: none;
}
a:hover {
color: #ff5c33;
text-decoration: none;
cursor: pointer;
}
#nav-user-logo{
max-height: 16px;
}
<div class="dropdown">
<a>
User123
<img src="https://www.ajvs.com/redirect/5/Agilent_IMG300_UHV_R0343301_1,8926cf9ec9ce009a52f3ea8866b07f5f" 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>
Probably, you have some kind of "reset" css sheet that is turning all your images as display:block It's quite common in many wordpress themes. You may need to overwrite these css adding img {display:inline-block} or similar rule. Calling to the id image or class to not break your whole theme.

Answer 3

Turns out the issue was something super simple. This code is in a header, on the right side, and the "a" element was too small to display the code and image side by side. I fixed it with the following:
<!-- Header right part -->
<div class="dropdown">
<a style="display:inline-block; width: 150px;">
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>