Grow Element Vertically While Positioned to Right of Other Elements - html

Question

I've searched this question and have found some answers but they just miss my scenario.
The situation is elements are dynamically created and placed into rows. In each row, the number of elements is variable, so I don't know how much horizontal space they take in advance. One of them I want to have take up the remainder and have it grow vertically as needed but for its left position to remain unchanged, which should always be positioned to the right of the other elements in its row. Here's a mockup of what it should look like for three rows where the second row needs to grow:
Instead, here is what I am getting:
Here's a simplified version of html that illustrates the issue:
.container {
display: block;
max-width: 600px;
border: 1px solid black;
}
.fixedPart1 {
display: inline-block;
width: 100px;
vertical-align: top;
background-color: red;
}
.fixedPart2 {
display: inline-block;
width: 200px;
vertical-align: top;
background-color: red;
}
.varPart {
display: inline-block;
max-width: 500px;
min-width: 50px;
background-color: yellow;
}
<div class="container">
<span class="fixedPart1">Row 1</span><span class="varPart">Text1: This text displays to the right of the red element.</span>
</div>
<div class="container">
<span class="fixedPart2">Row 2</span><span class="varPart">Text 2: This should display the same as the one above but instead it first moves down to clear the red element.</span>
</div>
<div class="container">
<span class="fixedPart1">Row 3</span><span class="varPart">This text displays to the right of the red element.</span>
</div>
Because my example here is a simplification, I am hoping that any solution offered is as close as possible to what I've posted here. Any guidance would be appreciated.

Answer 1

Simply use flexbox like below:
.container {
display: flex;
align-items:flex-start;
max-width: 600px;
border: 1px solid black;
}
.fixedPart1 {
width: 100px;
background-color: red;
}
.fixedPart2 {
width: 200px;
background-color: red;
}
.varPart {
flex-grow:1;
min-width: 50px;
background-color: yellow;
}
<div class="container">
<span class="fixedPart1">Row 1</span><span class="varPart">Text1: This text displays to the right of the red element.</span>
</div>
<div class="container">
<span class="fixedPart2">Row 2</span><span class="varPart">Text 2: This should display the same as the one above but instead it first moves down to clear the red element.</span>
</div>
<div class="container">
<span class="fixedPart1">Row 3</span><span class="varPart">This text displays to the right of the red element.</span>
</div>