Css flex layout not aligning aligning items as desired - html

Question

I am trying to position Author designation under Author name, i tried few thing since theme is using flex i find it hard to make it work.
This them is using flex all over the place and if change one thing it breaks other thing.
How can i place Author Designation under the Author Name with minimal css changes
https://codepen.io/KGuide/pen/OJJBzmp
.article-container .article-thumbnail-wrapper {
height: 480px;
height: auto;
}
.article-thumbnail-info {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: absolute;
width: 100%;
left: 0;
bottom: 20px;
padding: 0 15px;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.article-author {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none !important;
}
.article-author figure {
margin: 0;
width: 50px;
height: 50px;
margin-right: 18px;
}
.article-author figure img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}

Answer 1

Just wrapped two spans to div and aligned it to column with flex property:
https://codepen.io/Nevados/pen/mddzpYw

Answer 2

If the width of the image is static you can consider some margin trick. The 68px I am using is the width+margin for the image.
I removed some CSS to keep only the relevant one
.article-author {
display: flex;
flex-wrap: wrap; /* added */
/*align-items:center; removed */
text-decoration: none !important;
}
.article-author figure {
margin: 0;
width: 50px;
height: 50px;
margin-right: 18px;
}
.article-author figure img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
/* Added */
.blog-detail-author {
flex-basis: calc(100% - 68px);
margin-top: 5px;
}
.blog-detail-designation {
margin-left: 68px;
margin-top: -25px; /* This one is a bit hacky, you may need to change it based on the font or other CSS*/
}
<div class="article-thumbnail-wrapper blog-thumbnail-wrapper text-center">
<div class="article-author">
<figure class="article-author-avatar"><img alt="" src="http://themeflex.com/strucflex/en/structures/assets/img/avatar_2.jpg"></figure>
<span class="blog-detail-author">Author Name</span>
<span class="blog-detail-designation">Author Designation</span>
</div>
</div>

Answer 3

Try With this :
HTML
<div class="article-thumbnail-wrapper blog-thumbnail-wrapper text-center">
<div class="article-author">
<figure class="article-author-avatar"><img alt="" src="http://themeflex.com/strucflex/en/structures/assets/img/avatar_2.jpg"></figure>
<span>
<span class="blog-detail-author">Author Name</span>
<span class="blog-detail-designation">Author Designation</span>
</span>
</div>
</div>
CSS:
figure + span {
display:flex; flex-direction:column;
}