2 divs in 1 line - html

Question

How to make this div starts after the picture.
It starts from the beginning of the container.
I have added /float: left;/ in profile image.
enter image description here
HTML and CSS Code:
.profile{
border: 1px solid #ddd;
padding: 22px;
min-height: 150px;
}
.profile img{
max-width: 150px;
width: 100%;
float: left;
}
.profile #details{
margin-left: 50px;
}
<section class="profile">
<img src="https://www.sonypark360.net/wp-content/uploads/2017/08/profile-pictures.png" alt="profile">
<div id="details">
<h1>Name</h1>
<h2>Age</h2>
<h3>City, Country</h3>
</div>
</section>

Answer 1

This code should work for you
.my-profiles {
border: 1px solid #b2cbe3;
padding: 22px;
font-family: arial;
display: inline-block;
}
.my-profiles img{
max-width: 100px;
width: 100%;
border-radius: 50%;
float: left;
}
.my-profiles .details {
overflow-x: hidden;
padding-top: 10px;
padding-left: 8px;
display: inline-block;
}
.my-profiles .details * {
margin: 0px;
font-size: 22px;
font-weight: 200;
}
<div class="my-profiles">
<img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png">
<div class="details">
<h2>Name</h2>
<h2>Age</h2>
<h2>City, Country</h2>
</div>
</div>