It seems like there might be something obvious that I'm missing here, but essentially my goal is to create a footer with 2 columns and 2 rows.
In each column, there will be an icon (32x32) and 2 lines of text next to it.
The issue I'm facing is that when I use justify-items: center, the items are centered inside each column. However, if I add more text in my paragraph, the text expands in both directions, pushing the image on its left backwards (increasing the size of the parent div).
As a result, if the text sizes in those 2 lines are different, the footer items won't align properly.
body {
display: flex;
flex-direction: column;
background-color: #ecf3f6;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
min-height: 100vh;
}
.footer-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-items: center;
padding: 5px 0 5px 0;
}
.footer {
margin-top: auto;
background-color: #2ea2bf;
}
.footer-description {
display: block;
font-weight: bold;
}
.footer-item {}
footer p {
display: inline-block;
margin-left: 5px;
}<body>
<footer class="footer">
<div class="footer-wrapper">
<div class="footer-item">
<img class="footer-icons" src="img/localizacao.png">
<p>
<span class="footer-description">Address</span> Avenue Street.
</p>
</div>
<div class="footer-item">
<img class="footer-icons" src="img/phone.png">
<p>
<span class="footer-description">Phone</span> +1 234 5678
</p>
</div>
<div class="footer-item">
<img class="footer-icons" src="img/email.png">
<p>
<span class="footer-description">Email</span> <a href="mailto:example@example.com">example@example.com</a>
</p>
</div>
<div class="footer-item">
<img class="footer-icons" src="img/clock.png">
<p>
<span class="footer-description">Opening Hours</span> Mon-Sat: 9am - 5pm
</p>
</div>
</div>
</footer>
</body>