CSS arrange two divs next to each other - html

Question

I have following HTML:
<div className={`page-header-profile-photo-container`}>
<div className="user-picture">
</div>
<div className="user-name">
<p>Sample GmbhH</p>
</div>
</div>
And my css:
.page-header-profile-photo-container{
position: absolute;
top: 10%;
right: 130px;
width: 200px;
}
.user-picture {
position: relative;
top: 10%;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #787567;
}
.user-name{
position: absolute;
top: 5%;
}
This renders like following:
I want to have some space between circular div and text. page-header-profile-photo-container's position has to be absolute.
How can I fix this?

Answer 1

First of all correct your syntax like className to class and try the following code. No need to position:absolute in user-name class
.page-header-profile-photo-container{
width: 200px;
position: absolute;
top: 10%;
right: 130px;
}
.user-picture {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #787567;
display: inline-block;
vertical-align: middle;
}
.user-name{
display: inline-block;
vertical-align: middle;
}
<div class=page-header-profile-photo-container>
<div class="user-picture">
</div>
<div class="user-name">
<p>Sample GmbhH</p>
</div>
</div>

Answer 2

Don't use absolute positioning in user name. Absolute positioning puts an item in a particular position no matter what (doesn't care if it gets overlapped)

Answer 3

Using flex-box it will work good for me. Hope this help.
.page-header-profile-photo-container{
background-color: #f5f5f5;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: absolute;
height: 50px;
top: 10%;
right: 130px;
padding: 5px 10px;
width: 200px;
}
.user-picture {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
/*background-color: #787567;*/
}
.user-picture img{
border-radius: 50%;
display: block;
height: auto;
max-width: 100%;
}
.user-name{
font-size: 15px;
}
<div class=page-header-profile-photo-container>
<div class="user-picture">
<img src="http://placehold.it/40x40" alt="Profile Picture" />
</div>
<div class="user-name">
<p>Sample GmbhH</p>
</div>
</div>