Align element to the second column - css

Question

I have the following layout:
#container {
display: flex;
flex-wrap: wrap;
}
#a {
flex-basis: 100%;
height: 100px;
}
#b {
flex-grow: 1;
height: 150px;
}
#c {
flex-grow: 2;
height: 100px;
}
/* Less relevant styles */
#a, #b, #c {
font-family: sans-serif;
font-size: 3em;
color: white;
text-shadow: 1px 1px 3px grey;
display: flex;
justify-content: center;
align-items: center;
}
#a {
background-color: #FFC300;
}
#b {
background-color: #FF5733;
}
#c {
background-color: #C70039;
}
<div id="container">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</div>
How can I change the A element so that instead of taking up all the horizontal space, it's aligned to the C element? Basically I want to achieve something like that:
Note that I don't want to set something like margin-left: 33% on the A element, because I don't know if the B element will always take up one third of the horizontal space. I want the A element to remain aligned to C even if the width of B or C changes.
If possible, I want to achieve this using flexbox, but I'm open to workarounds.

Answer 1

Wrapping nested flexboxes and justify-content:flex-end is one option.
#container {
display: flex;
}
[class^="wrap"] {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
/* Less relevant styles */
#a,
#b,
#c {
height: 100px;
font-family: sans-serif;
font-size: 3em;
color: white;
text-shadow: 1px 1px 3px grey;
display: flex;
justify-content: center;
align-items: center;
}
#a {
background-color: #FFC300;
}
#b {
background-color: #FF5733;
}
#c {
background-color: #C70039;
}
.wrap-left {
flex: 1;
}
.wrap-right {
flex: 2;
}
<div id="container">
<div class="wrap-left">
<div id="b">B</div>
</div>
<div class="wrap-right">
<div id="a">A</div>
<div id="c">C</div>
</div>
</div>

Answer 2

This sort of layout is standard for a table element (especially because of the variable width of each column). Something to consider, if possible.
Basically, you need to force "A" and "C" into the same column so they can track each other's width.
One method would be to force "B" to consume all space in the first column. This can be done by nesting "B" in a container with 100% height, then aligning "B" to the bottom half.
#container {
display: flex;
flex-flow: column wrap;
height: 200px;
}
nested-container {
flex-basis: 100%;
display: flex;
align-items: flex-end;
}
#b {
flex: 1;
background-color: #FF5733;
}
#a {
background-color: #FFC300;
}
#c {
background-color: #C70039;
}
#a, #b, #c
{
height: 100px;
font-family: sans-serif;
font-size: 3em;
color: white;
text-shadow: 1px 1px 3px grey;
display: flex;
justify-content: center;
align-items: center;
}
<div id="container">
<nested-container>
<div id="b">B</div>
</nested-container>
<div id="a">A</div>
<div id="c">C</div>
</div>

Answer 3

You can group your boxes this way:
<div id="container">
<div class="first-col">
<div id="empty"></div>
<div id="b">B</div>
</div>
<div class="second-col">
<div id="a">A</div>
<div id="c">C</div>
</div>
</div>
and style their width togehter by column, but their color and content by id