How do I make the both inline block div parallel? [duplicate] - html

Question

This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I trying to make a 2 parallel div in center to show the user info. Left div contain the user image and the name while the right div show the login details such as login name, position, department and etc. I been try set the line height same as my div height but the result is not what i want, or may be the line height doesn't fix the issue or i using the wrong way to achieve this. Beside this, I have try set the both div to inline-flex and make the 2 div float left. This can make the 2 div in parallel but not in the center of the page. Any better way to achieve this?
my code
<div style="text-align: center; width: 80%; margin: auto;">
<div
style="
display: inline-block;
width: 240px;
height: 270px;
text-align: center;
box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2);
"
>
<img
id="pf-img"
style="display: block; text-align: center; margin: 21px 45px 0px; border-radius: 50%; box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2);"
src="/assets/images/avatar_v3.png"
alt=""
width="150px"
/>
<div style="margin: 40px 0px;">
<span>Name</span>
</div>
</div>
<div style="display: inline-block; margin-left: 30px;">
<div style="display: block; box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
<div style="display: block; box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px; margin-top: 38px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
<div style="box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px; margin-top: 38px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
<div style="box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px; margin-top: 38px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
</div>
</div>
My result:
my result image

Answer 1

I am not sure why you are bringing up flex when you are not using such CSS feature.
Adding the CSS property vertical-align: top; to left column should do the trick.
<div style="text-align: center; width: 80%; margin: auto;">
<div
style="
display: inline-block;
width: 240px;
height: 270px;
text-align: center;
vertical-align: top;
box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2);
"
>
<img
id="pf-img"
style="display: block; text-align: center; margin: 21px 45px 0px; border-radius: 50%; box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2);"
src="/assets/images/avatar_v3.png"
alt=""
width="150px"
/>
<div style="margin: 40px 0px;">
<span>Name</span>
</div>
</div>
<div style="display: inline-block; margin-left: 30px;">
<div style="display: block; box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
<div style="display: block; box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px; margin-top: 38px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
<div style="box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px; margin-top: 38px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
<div style="box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2); padding: 10px; margin-top: 38px;">
<div style="display: inline-block; width: 280px; text-align: left;">Login Name</div>
<div style="display: inline-block; width: auto;">Login Name</div>
</div>
</div>
</div>

Answer 2

Okay, before that I have some tips:
1 ° Avoid in-line styling
This makes the HTML code confusing, difficult to read
2 ° Use CSS classes
Classes allow you to apply the same style to several elements at the same time
3 ° Use correct marking
Divs are generic containers for other elements. They serve to group and separate elements of the page. You have only used divs to structure the entire page, not taking advantage of the semantic meaning of other elements of HTML.
Having made these observations, the solution I propose is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.user-info-container {
display:flex;
}
.user-img {
margin-right: 1rem;
}
.user-img img {
width: 100%;
height: auto;
}
.user-info-badge {
display:flex;
align-items:center;
box-shadow: 0 .5px 5px 0 rgba(0,0,0,0.2);
padding: 0.5rem 1rem;
margin-bottom: 1rem;
}
.user-info-badge:last-child {
margin-bottom: 0;
}
.user-info-badge h3 {
width: 150px;
text-align:left;
}
</style>
</head>
<body>
<div class="user-info-container">
<div class="user-img">
<img src="/assets/images/avatar_v3.png">
</div>
<div class="user-info-badges">
<div class="user-info-badge">
<h3>Username</h3>
<span>teste183</span>
</div>
<div class="user-info-badge">
<h3>Email</h3>
<span>teste.teste#teste.com</span>
</div>
<div class="user-info-badge">
<h3>Nascimento</h3>
<span>05-02-2020</span>
</div>
</div>
</div>
</body>
</html>