Problem with displaying elements as an inline-block - html

Question

I am not an expert in CSS, but I am trying to add a title next to Profile Image and Name as per the pic added
I am trying to send the text next to the profile name and image and enlarge the font but I think there is something wrong with the CSS so can I override the CSS and write it directly in the HTML or what is the best way to do it
here is the HTML
<div class="dcard_header" style:"display: inline-block;">
<div class="profile_image" href="{% url 'score:user-posts' post.designer.username %}">
<img class="profile_image" src="{{ post.designer.profile.image.url }}">
</div>
<div class="post_info">
<a class="post_name" href="{% url 'score:user-posts' post.designer.username %}">{{ post.designer }}</a>
</div>
<div class="caption" style="text-align:center;">
<strong><span><p>{{post.title}}</p></span></strong>
</div>
</div>
This is the CSS
.dcard {
background-color: #ffff;
margin: 0 auto;
width: 614px;
height: auto;
border: 0.8px solid #ccc;
border-radius: 4px;
margin-bottom: 20px;
}
.dcard_header {
padding: 10px;
display: inline-block;
}
.dcard_header a {
text-decoration: none;
color: black;
}
.profile_image {
display: inline-block;
height: 40px;
width: 40px;
padding: 0;
margin: 0;
border: 0 solid #000000;
border-radius: 50%;
}
.post_info {
display: inline-block;
padding-left: 14px;
}
.caption {
display: inline-block;
width: 100%;
padding: 0px 16px;
}
.caption a {
font-weight: bold;
color: #000;
text-decoration: none;
display: inline-block;
padding-left: 5px;
margin-left: -5px;
padding-right: 5px;
}
.caption span {
font-size: 18px;
color: #111;
display: inline-block;
margin-right: 15px;
display: inline-block;
}
Thanks all

Answer 1

Rather than inline-block, you can try using flex.

Answer 2

should It, fix:
.dcard_header {
padding: 10px;
display: flex;
}