Place logo and text in the same line - html

Question

I am trying to create the header part of my page. In the header, I want to have an image (a logo) on the left side, and a "logged in as ..." on the right side of the same line.
The problem that I have is that the logo simply overrides the "logged in as" text, so only logo stays visible on the page, and there is no text.
Here is the code:
<div class="header">
<span class="myLogo"/>
<span class="user">
Logged in as " target="_blank">${user}</a>
</span>
</div>
CSS:
.myLogo {
display: inline;
float: left;
margin-left: 10px;
margin-top: 30px;
content:url("myLogo.png");
}
.user {
text-align: right;
white-space: nowrap;
display: inline;
float: left;
margin-top: 20px;
margin-right: 30px;
font-size: large;
}
.header {
display: inline-block;
}
How can I have my logo on the left side of the page, and my text on the right side of the page, but in the same line?

Answer 1

I think you should set
display: inline-block;
for both class or change class user to
float: right

Answer 2

Use this CSS.
.myLogo {
display: inline;
float: left;
margin-left: 10px;
margin-top: 30px;
content:url("myLogo.png");
}
.user {
white-space: nowrap;
display: inline;
float: right;
margin-top: 20px;
margin-right: 30px;
font-size: large;
}
.header {
display: inline-block;
width: 100%;clear:both;
}

Answer 3

Why do you use content instead of an <img> tag?
Anyway, what I could suggest for you is to use flexbox:
.header{
display: flex;
align-items: baseline;
}
.user{
margin-left: auto;
}

Answer 4

You can try this method
HTML:
<div>
<img class="myLogo" src = "myLogo.png"/>
</div>
<div class="user">
Logged in as <a target="_blank">${user}</a>
</div>
CSS:
.myLogo {
display: inline;
float: left;
margin-left: 10px;
margin-top: 30px;
height: 10px;
width: auto;
}
.user {
text-align: right;
white-space: nowrap;
display: inline;
float: left;
margin-top: 20px;
margin-right: 30px;
font-size: large;
}
.header {
display: inline-block;
}

Answer 5

You have to make 2 changes
remove inline block for .header class
Change float:right under .user class
.myLogo {
display: inline;
float: left;
margin-left: 10px;
content:url("https://1.bp.blogspot.com/-NknV6HIVxKc/V06_WraBJEI/AAAAAAAAJWc/QwJMGxKHaywCIf2QHOLD-YwFQdn8VDaVgCLcB/s320/chelsea-logo.PNG");
width:50px;
height:50px;
}
.user {
text-align: right;
white-space: nowrap;
display: inline;
float: right;
margin-right: 30px;
font-size: large;
}
<div class="header">
<span class="myLogo"></span>
<span class="user">
Logged in as <a target="_blank">hai</a>
</span>
</div>