I need assistance with aligning three boxes next to each other, each containing an image, header, and text. The issue arises when resizing the browser, causing the content in box 2 and 3 to be positioned higher than box 1.
Below is the code I have been using:
<section id="boxes">
<div class="container">
<div class="box">
<img src="https://www.w3.org/html/logo/downloads/HTML5_1Color_Black.png" alt="html5 logo">
<h3>HTML 5 Website</h3>
<p>Curabitur porttitor metus odio, fringilla bibendum sem faucibus quis. C</p>
</div>
<div class="box">
<img src="https://www.w3.org/html/logo/downloads/HTML5_1Color_Black.png" alt="html5 logo">
<h3>Webbie</h3>
<p>Curabitur porttitor metus odio, fringilla bibendum sem faucibus quis. C</p>
</div>
<div class="box">
<img src="https://www.w3.org/html/logo/downloads/HTML5_1Color_Black.png" alt="html5 logo">
<h3>Informatie</h3>
<p>Curabitur porttitor metus odio, fringilla bibendum sem faucibus quis. C</p>
</div>
</div>
</section>
Additionally, here is the CSS I have implemented:
#boxes .container {
display: flex;
max-width: 900px;
}
.box {
display: flex;
flex-direction: column;
}
.box img {
max-width: 100%;
}
You can find a jsfiddle of the layout here: https://jsbin.com/gudomuyora/edit?html,css,output
I am looking for guidance on how to evenly align the top of the p elements within all 3 boxes.