Align matching content in separate containers depending on width of largest content - html

Question

I'm aware of CSS Subgrid being able to solve a layout like this, but what I'm looking to achieve is a list of containers with content inside. The content inside the containers is aligned right in the containers, but all the content is aligned (left) to the longest content.
Is this possible with flex? Are there any strategies to achieve this?
I suppose the HTML structure would be something like:
<div class="container">
<div class="content" style="100px"></div>
</div>
<div class="container">
<div class="content" style="300px"></div>
</div>
<div class="container">
<div class="content" style="400px">All other content aligned to this longest content</div>
</div>
<div class="container">
<div class="content" style="200px"></div>
</div>

Answer 1

It is most definitely doable with flex.
What I've done is create 2 columns inside the .container element. Column 2 will be right aligned inside the container, and your .content will be left aligned inside .column2.
All you need to do to adjust the alignment of the content inside the containers, is to play around with the widths of .column1 and .column2 in the snippet below:
* {
font-family: sans-serif;
}
.container {
display: flex;
background: lightgray;
align-items: center;
border-radius: 5px;
margin-bottom: 10px;
padding: 7px;
}
.content {
display: flex;
align-items: center;
padding: 0 10px;
background: #666;
border-radius: 5px;
color: white;
height: 50px;
}
.column1 {
width: 30%;
}
.column2 {
width: 70%;
}
<div class="container">
<div class="column1">Container</div>
<div class="column2">
<div class="content" style="width: 100px"></div>
</div>
</div>
<div class="container">
<div class="column1">Container</div>
<div class="content" style="width: 250px"></div>
</div>
</div>
<div class="container">
<div class="column1">Container</div>
<div class="column2">
<div class="content">All other content aligned to this longest content</div>
</div>
</div>
<div class="container">
<div class="column1">Container</div>
<div class="column2">
<div class="content" style="width: 200px"></div>
</div>
</div>