How to correctly align these elements with flexbox? - html

Question

Sorry for the really vague question title but I have no idea how to best describe it...
Take the following code example:
.wrapper {
border: 2px solid green;
}
.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border: 2px solid red;
margin: 5px;
height: 64px;
}
.item {
display: flex;
border: 2px solid #0000ff;
padding: 3px;
}
.left {
justify-content: flex-end;
}
.right {
justify-content: flex-start;
}
<div class="wrapper" style="width: 100%">
<div class="container">
<div class="item left">FIXED</div>
<div class="item right">abc</div>
</div>
<div class="container">
<div class="item">FIXED</div>
</div>
<div class="container">
<div class="item left">FIXED</div>
<div class="item right">abcdefgh</div>
</div>
</div>
<br />
<div class="wrapper" style="width: 50%">
<div class="container">
<div class="item left">FIXED</div>
<div class="item right">abc</div>
</div>
<div class="container">
<div class="item">FIXED</div>
</div>
<div class="container">
<div class="item left">FIXED</div>
<div class="item right">abcdefgh</div>
</div>
</div>
Observations:
FIXED represents an element of fixed size, always same width/height.
The right side element can vary on size (mostly width).
The right side element is always aligned to the left.
The left side element is always aligned to the left.
What I'm trying to achieve:
The FIXED element should always be centered on the red row.
THE FIXED element on the first/third rows needs to be aligned to the right side of the FIXED element on the second row.
Here's an image to better demonstrate what I'm looking for:
EDIT: My final solution based on the #vals answer. I had to change this a bit because I'm using CSS Modules with selector composition in a React app and I need a single class per element.
.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
/* UNREQUIRED (FOR DEMONSTRATION ONLY) */
border: 2px solid red;
padding: 5px;
}
.container::before {
content: "";
flex: 1 0 14px; /* UNREQUIRED (FOR DEMONSTRATION ONLY) (14px -> 0) */
}
.container-single {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
/* UNREQUIRED (FOR DEMONSTRATION ONLY) */
border: 2px solid red;
padding: 5px;
}
.item {
display: flex;
flex: 0 0 auto;
/* UNREQUIRED (FOR DEMONSTRATION ONLY) */
border: 2px solid #0000ff;
padding: 5px;
}
.item-right {
display: flex;
flex: 1 0 0;
/* UNREQUIRED (FOR DEMONSTRATION ONLY) */
border: 2px solid #0000ff;
padding: 5px;
}
.item-left {
display: flex;
flex: 0 0 auto;
margin-left: auto;
/* UNREQUIRED (FOR DEMONSTRATION ONLY) */
border: 2px solid #0000ff;
padding: 5px;
}
<div class="container">
<div class="item-left">FIXED</div>
<div class="item-right">abc</div>
</div>
<br />
<div class="container-single">
<div class="item">FIXED</div>
</div>
<br />
<div class="container">
<div class="item-left">FIXED</div>
<div class="item-right">abcdefgh</div>
</div>
For anyone interested, the CSS selector composition goes like this:
.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.container::before {
flex: 1 0 0;
content: "";
}
.container-single {
composes: container;
}
.item {
display: flex;
flex: 0 0 auto;
}
.item-right {
flex: 1 0 0;
composes: item;
}
.item-left {
margin-left: auto;
composes: item;
}

Answer 1

I have changed the layout slighty, I have add a class on the single container.
Is it ok for the right element to grow ?
.container {
display: flex;
flex-direction: row;
border: 2px solid red;
padding: 5px;
}
.item {
display: flex;
flex-basis: auto;
flex-grow: 0;
border: 2px solid #0000ff;
padding: 5px;
}
.item.right {
flex-basis: 0;
flex-grow: 1;
}
.item.left {
margin-left: auto;
}
.container:not(.single):before {
content: "";
flex-basis: 14px; /* border 2px + padding 5px */
flex-grow: 1;
}
.single .item {
margin: 0px auto;
}
<div class="container">
<div class="item left">FIXED</div>
<div class="item right">abc</div>
</div>
<br />
<div class="container single">
<div class="item">FIXED</div>
</div>
<br />
<div class="container">
<div class="item left">FIXED</div>
<div class="item right">abcdefgh</div>
</div>