How can I achieve the desired layout for this image?
I have written some code and applied CSS to get the output, but I encountered an issue. When the text in my address section is too large, the icon gets misaligned and collapses. How can I fix this issue without using bootstrap? I want to learn more about using the flex property. Here is a link to my JSFiddle.
*{
margin: 0;
}
section{
background-color: #555;
padding: 2rem 0;
text-align: center;
}
.contact{
display: inline-block;
text-align: left;
}
.contact h2{
color: white;
font-size: 1.125rem;
font-weight: 500;
text-align: center;
text-transform: uppercase;
margin-bottom: 20px;
}
.contact li{
display: flex;
align-items: center;
margin-bottom: 10px;
}
.contact li:last-child{
margin: 0;
}
.contact a{
color: white;
text-decoration: none;
}
.contact a:hover{
color: yellow;
}
.contact p{
color: white;
line-height: 1.4;
}
.contact .fa{
color: white;
font-size: 1.5rem;
line-height: 30px;
margin-right: 10px;
width: 30px;
height: 30px;
text-align: center;
} <section>
<div class="contact">
<h2>Contact us</h2>
<ul>
<li>
<i class="fa fa-envelope"></i>
<a href="#"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7302061600071a1c1d00331d1604101c5d101c1e">[email protected]</a></a>
</li>
<li>
<i class="fa fa-phone"></i>
<a href="#">111-222-333</a>
</li>
<li>
<i class="fa fa-building-o"></i>
<p>NewCo, Inc <br>
123 Main St. <br>
Somewhere, CA 12345
</p>
</li>
</ul>
</div>
</section>