Aligning flexbox item next to flex-grow item - html

Question

Given the following CSS:
.row {
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
.middle {
flex-grow: 1;
margin: 0 1em;
}
And the following HTML:
<div>
<div class="row">
<div>X</div>
<div class="middle">Variable Content</div>
<div>A</div>
</div>
<div class="row">
<div>X</div>
<div class="middle">Content</div>
<div>AB</div>
</div>
<div class="row">
<div>X</div>
<div class="middle">Var Content</div>
<div>ABC</div>
</div>
</div>
This layout which includes rows and three "columns":
"X" The left column contains the same element in every row, so its width is effectively fixed. This column should only use the amount of space necessary for the element.
"Content" The middle column contains variable text. It should occupy the majority of each row.
"ABC" The right column is where I'm having trouble. The content is text and could be 1-5 characters. I want the characters left aligned across the entire "table". Edit: I don't want to declare a fixed width.
Working example: https://codepen.io/anon/pen/bjEKBW
In short: How do I get the "A" in every column to be left aligned down the entire layout? I'm not married to the HTML layout.

Answer 1

What you have here is a table...I'd suggest you use one or CSS-Tables.
.row {
padding: 0;
margin: 0;
list-style: none;
display: table-row;
}
.row div {
display: table-cell;
padding: 0 .25em;
}
.middle {
width: 100%;
}
<div>
<div class="row">
<div>X</div>
<div class="middle">Variable Content</div>
<div>A</div>
</div>
<div class="row">
<div>X</div>
<div class="middle">Content</div>
<div>AB</div>
</div>
<div class="row">
<div>X</div>
<div class="middle">Var Content</div>
<div>ABC</div>
</div>
</div>
Alternatively, you can dispense with the rows and use CSS Grid
.grid {
display: grid;
grid-template-columns: auto 1fr auto;
}
.grid div {
padding: 0 .25em;
}
<div class="grid">
<div>X</div>
<div class="middle">Variable Content</div>
<div>A</div>
<div>X</div>
<div class="middle">Content</div>
<div>AB</div>
<div>X</div>
<div class="middle">Var Content</div>
<div>ABC</div>
</div>

Answer 2

You can give the last column a fixed width, e.g.
.row > div:last-child {
width: 100px;
}