Aligning flexbox item next to flex-grow item

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;
}