Equal width flex columns when the container has fluid width - css

Question

Consider the following HTML code:
<div class="ungrouped-ordered-item">
<div class="information-container">
<div class="originating-order-id"> #00019405 </div>
<div class="placed-by"> Placed by: 18175 </div>
</div>
<div class="indicator-container">
<div class="indicator"> Unpaid </div>
<div class="indicator" >Pending </div>
</div>
</div>
with the following css:
.ungrouped-ordered-item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.information-container {
display: flex;
flex-direction: column;
}
.indicator-container {
display: flex;
flex-direction: row;
align-items: center;
}
.indicator-container .indicator {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
padding: 0 10px;
border: 1px solid #2e2240;
}
The design I am aiming for, is:
to let the outermost flex containers (.ungrouped-ordered-item) children, grow as they need, and leave space between them, so that they are aligned to the left and right respectively of their containers
to make the children of the inner flex container (.indicator-container .indicator) be equal-width, by taking up the width of the wider element (in this case, it being the element with the text "Pending")
My first goal is achieved, but it seems, that even if adding flex: 1 to the .indicator containers, the browser will not correctly calculate the width of the two elements, and they will have uneven widths. I am presuming that this is because that their container, .indicator-container, has a fluid width. Am I right in this? How can I achieve my desired effect with all fluid width containers? (preferably without javascript).
Here's a fiddle also!

Answer 1

What is the argument against a width:50% for the .indicatorbox?
.ungrouped-ordered-item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.information-container {
display: flex;
flex-direction: column;
}
.indicator-container {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
.indicator-container > * {
border: 1px solid #2e2240;
padding: 0 10px;
flex-wrap: wrap;
}
.indicator-container .indicator {
width: 50%;
text-align: center;
}
<div class="ungrouped-ordered-item">
<div class="information-container">
<div class="originating-order-id"> #00019405 </div>
<div class="placed-by"> Placed by: 18175 </div>
</div>
<div class="indicator-container">
<div class="indicator"> Unpaid </div>
<div class="indicator" >Pending long long</div>
</div>
</div>

Answer 2

Changing the .indicator-container class from flex to grid and using automatic columns solves my problem. Although, it doesn't have as much coverage as flex, for my needs, this works:
.indicator-container {
display: grid;
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
}
Here's the updated fiddle also.