Aligning multiple divs with “align-items” but one fail

Question

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!