Flexbox - Don't move centered columns if width changes - html

Question

I have a frustrating problem with the otherwise great flexbox capabilities. I have the following layout with a centered column
The problem is, if one of the texts in the row grows or shrinks, then the FB/IG icons will not be in the same column line anymore. See what happens:
How can I achieve for variable width texts to not make the element grow to the left, but make the FB and IG icons actually stay in the same line no matter the variable texts??
Here is the code
.test-links {
display: flex;
flex-direction: column;
}
.test-link {
display: flex;
justify-content: center;
align-items: center;
}
<div class="test-wrapper">
<img class="test-img" src="path" />
<div class="test-links">
<a class="test-link">
<i class="fb"></i>
<span>Test</span>
</a>
<a class="test-link">
<i class="ig"></i>
<span>LongerText</span>
</a>
</div>
</div>
Thank you for your help!

Answer 1

.test-links {
display: flex;
flex-direction: column;
}
.test-link {
display: flex;
justify-content: left;
align-items: center;
width:100px;
margin:0 auto;
}
.test-wrapper
{
text-align:center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="test-wrapper">
<img class="test-img" src="https://dummyimage.com/100x100/000/fff" />
<div class="test-links">
<a class="test-link">
<i class="fb fa fa-facebook"></i>
<span>Test</span>
</a>
<a class="test-link">
<i class="ig fa fa-instagram"></i>
<span>LongerText</span>
</a>
</div>
</div>

Answer 2

I used <img src="http://via.placeholder.com/20x20" /> instead of icons, so to render something. position: absolute for text does the job.
Following MDN's definition:
[position] absolute: the element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
... so left:100% moves it to the left for whole width of parent's element, which is only an icon. You can create a distance between icon/image and text using margin-left for text. position: relative for link makes it a hook for position of absolute child.
You can adjust precise values.
Snippet
.test-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.test-links {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px 0 0 0;
}
.test-link {
position: relative;
}
.test-link span {
position: absolute;
top: 0;
left: 100%;
}
<div class="test-wrapper">
<img class="test-img" src="http://via.placeholder.com/50x50" />
<div class="test-links">
<a class="test-link">
<img src="http://via.placeholder.com/20x20" />
<span>Test</span>
</a>
<a class="test-link">
<img src="http://via.placeholder.com/20x20" />
<span>LongerText</span>
</a>
</div>
</div>

Answer 3

Since, span cannot take width, use p instead and then add the following class to you code:
.test-link p{
width: 50px;
height:auto;
word-break:break-all;
text-align:left;
}
And then you will achieve the desired format.
Here is a link to the fiddle supporting this answer.
Here is the snippet:
.test-links {
display: flex;
flex-direction: column;
}
.test-link {
display: flex;
justify-content: center;
align-items: center;
}
.test-link p{
width:50px;
height:auto;
word-break:break-all;
text-align:left;
}
<div class="test-wrapper">
<div class="test-links">
<a class="test-link">
<img src="http://via.placeholder.com/20x20">
<p>Test</p>
</a>
<a class="test-link">
<img src="http://via.placeholder.com/20x20">
<p>LongerText</p>
</a>
</div>
</div>
Hope this was helpful.