How to display items aligned? - html

Question

this is for sure a common question but text-align and display properties are not solving it, so i must have some mistake.
What should i do to display the 3 items in the same horizontal line?
.contact__information {
vertical-align: middle;
margin-bottom: var(--mb-1);
padding-right: var(--mb-.75);
align-items: right;
text-align: center;
display: inline-flex;
margin-left: auto;
margin-right: auto;
}
<section class="contact section" id="contact">
<h2 class="section__title">Contacte</h2>
<span class="section__subtitle">Contacte para mais informações</span>
<div class="contact__information">
<i class="uil uil-phone contact__icon"></i>
<div>
<h3 class="contact__title">Telemóvel</h3>
<span class="contact__subtitle">999-777-666</span>
</div>
</div>
<div class="contact__information">
<i class="uil uil-envelope contact__icon"></i>
<div>
<h3 class="contact__title">Email</h3>
<span class="contact__subtitle">email.com</span>
</div>
</div>
<div class="contact__information">
<i class="uil uil-map-marker contact__icon"></i>
<div>
<h3 class="contact__title">Morada</h3>
<span class="contact__subtitle">Portugal</span>
</div>
</div>
</section>

Answer 1

Step 1: Define width
Step 2: Locate parent to flex - #contact
Step 3: align-items: center; makes all elements inline (aligned)
Step 4: justify-content: space-evenly; spaces all elements evenly. Using up extra space.
#contact {
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
}
<section class="contact section" id="contact">
<h2 class="section__title">Contacte</h2>
<span class="section__subtitle">Contacte para mais informações</span>
<div class="contact__information">
<i class="uil uil-phone contact__icon"></i>
<div>
<h3 class="contact__title">Telemóvel</h3>
<span class="contact__subtitle">999-777-666</span>
</div>
</div>
<div class="contact__information">
<i class="uil uil-envelope contact__icon"></i>
<div>
<h3 class="contact__title">Email</h3>
<span class="contact__subtitle">email.com</span>
</div>
</div>
<div class="contact__information">
<i class="uil uil-map-marker contact__icon"></i>
<div>
<h3 class="contact__title">Morada</h3>
<span class="contact__subtitle">Portugal</span>
</div>
</div>
</section>

Answer 2

Feels like an opportunity for flex. I added borders and padding just to make it obvious what was where and did some alignment you can customize as needed
.contact.section {
display: flex;
flex-direction: row;/* or column if you want the first two on top */
justify-content: flex-start;
align-items: center;
}
.contact__information,
.contact__information div { /*probably need a class for the div */
display: flex;
flex-direction: row;
justify-content: center;
border: solid 1px lime;
padding:0.25rem;
}
.contact__information div {
display: flex;
flex-direction: column;/* or row if titles are in line with data */
border: solid 1px pink;
}
.contact__title {
border: solid blue 1px;
padding: 0.5rem;
align-self: center;
}
.contact__subtitle {
border: solid #8d8dff 1px;
padding: 0.5rem;
align-self: center;
}
<section class="contact section" id="contact">
<h2 class="section__title">Contacte</h2>
<span class="section__subtitle">Contacte para mais informações</span>
<div class="contact__information">
<i class="uil uil-phone contact__icon"></i>
<div>
<h3 class="contact__title">Telemóvel</h3>
<span class="contact__subtitle">999-777-666</span>
</div>
</div>
<div class="contact__information">
<i class="uil uil-envelope contact__icon"></i>
<div>
<h3 class="contact__title">Email</h3>
<span class="contact__subtitle">email.com</span>
</div>
</div>
<div class="contact__information">
<i class="uil uil-map-marker contact__icon"></i>
<div>
<h3 class="contact__title">Morada</h3>
<span class="contact__subtitle">Portugal</span>
</div>
</div>
</section>