First letter moving undesirably with transition + transform (Firefox) - html

Question

I have a list of div elements with a big letter (A, B, C or D) and span (description) inside. I would like to center these span elements horizontally respect to each parent div, but keeping a fixed distance among all big letters. I'm looking for something like this:
The centering part is done with:
span{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
But when I apply a simple transition (opacity for example) to div elements, the first letter in span elements is moved from it's place. If I remove the transition or transform property the issue goes away, but I need both (transform for centering).
Question: How to fix the issue with transition and transform, or how to center span elements without transform, but keeping the fixed distance among big letters?
Here is the code, and a DEMO:
HTML:
<div class="elements">
<div>A<span>Description</span></div>
<div>B<span>Really Long Description</span></div>
<div>C<span>Description</span></div>
<div>D<span>Description</span></div>
</div>
SCSS:
.elements{
margin-left: 50px;
div{
position: relative;
display: inline-block;
font-size: 40px;
margin: 0 10px;
opacity: 0.7;
transition: 0.3s;
&:hover{
opacity: 1;
span{
opacity: 1;
}
}
span{
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
transition: 0.3s;
font-size: 15px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
}
}
}

Answer 1

Depending on compatibility requirements, you could always use the flex box model, and it's handy justify-content property, like so:
.elements {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; /*Only one out of the above that's really needed...*/
justify-content: space-around;/*Only one out of the below that's really needed...*/
-ms-flex-pack: distribute;
justify-content: space-around;
}
.elements >div {
position: relative;
display: inline-block;
opacity: 0.7;
font-size: 30pt;
text-align: center;
transition: 0.3s opacity;
}
.elements >div:hover {
opacity: 1;
}
.elements >div >div {
font-size: 12pt;
white-space: nowrap;
}
<div class="elements">
<div>A
<div>Description</div>
</div>
<div>B
<div>Long Description</div>
</div>
<div>C
<div>Description</div>
</div>
</div>
Your question has a very nice solution, tables! While they should only be used for tabular data semantically, they do have some nice display properties, and they'be been used since forever so compatibility is not an issue.
body{
display:table;
table-layout:fixed;
}
.elements{display:table-row;}
.elements >div {
width:20%; /*100% / Number of cells*/
display:table-cell;
padding:0 10px; /*There needs to be a little spacing otherwise it looks bad :) */
opacity: 0.7;
font-size: 30pt;
text-align: center;
transition: 0.3s opacity;
}
.elements >div:hover {
opacity: 1;
}
.elements >div >div {
font-size: 12pt;
white-space: nowrap;
}
<div class="elements">
<div>A
<div>Description</div>
</div>
<div>B
<div>Long Description</div>
</div>
<div>C
<div>Description</div>
</div>
<div>D<div>Description</div></div>
</div>

Answer 2

I have not found a way to make work properly transition and transform properties (Firefox at least). But I found a way to center each span elements inside it parent div, keeping distance among big letters (A, B, C & D).
See the SOLUTION DEMO, and the code added (SCSS):
$div-width: 40px;
$span-width: 200px;
.elements{
div{
width: $div-width; // fixed width
text-align: center; // center text
span{
width: $span-width; // big fixed width
left: -($span-width/2 - $div-width/2); // -(200px / 2 - 40px / 2)
}
}
}