Aligning multiple divs with “align-items” but one fail [duplicate] - css

Question

This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
What's the difference between align-content and align-items?
(15 answers)
Closed 1 year ago.
I am desperate to know why the div that works under the flex container doesn't follow "align-items:flex-end"? (Altho the result now is what I want, but I just want to understand the logic behind it)
The below picture shows the result. which <h2> section doesn't go to the cross end, but <div2> does.
enter image description here
following the HTML and CSS code
body,html{
padding: 0;
margin: 0;
height: 100%;
}
body{
background-color: #3F5D45;
display:flex;
align-items:center;
justify-content:center;
}
.all{
width: 90%;
}
.top{
height: 60px;
background-color: #EAF0ED;
padding: 0 30px;
border-radius: 5px 5px 0 0;
color: #3F5D45;
font-weight: bold;
display:flex;
justify-content:space-between;
}
.div1{
background-color: #fff;
padding: 30px 50px;
display:flex;
flex:1;
}
.div1 .con{
padding-left:50px;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:flex-end;
flex:1 1 66.6%;
}
.div2 i{
font-size: 20px;
color: #3F5D45;
padding: 0 3px;
}
.div1 .pic{
height: 350px;
width: 350px;
background-image: url('https://images.unsplash.com/photo-1462745294598-b3f9a2d7b858?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80');
background-size: cover;
flex:1 1 33.3%;
}
<div class="all">
<div class="top">
<img src="https://pei-qun.github.io/Sweetaste/img/flex-ex-img3.svg" height="55" alt="">
<p>more</p>
</div>
<div class="div1">
<div class="pic"></div>
<div class="con">
<article>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque imperdiet eu odio et vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris sollicitudin sem justo, non pulvinar nunc vehicula in. Nullam non mollis dolor, in luctus est. Phasellus dictum erat ut fermentum consequat.</p></article>
<div class="div2">
<i class="fa fa-share-square-o"></i>
<i class="fa fa-heart-o"></i>
<i class="fa fa-facebook-square" ></i>
</div>
</div>
</div>
If anyone knows why is the reason this happened, please let me know!
It will be much appreciated! Thank you!