css Flex fluid widths - css

Question

I have a somewhat complicated problem. I have to present ingredients of recipes in 2 columns. One column is the ingredient quantity and measuring unit and on the right it is the ingredient.đ
Structure wise one ingredient get's 2 DIV-s, left and right part
.recipeIngredient {
display: flex
}
.unit {
flex: 1: border-right:1 px solid #666;
padding-right: 3%;
text-align: right;
}
.ingredient {
flex: 2;
padding-left: 3%;
text-align: left
}
<p class='recipeIngredient'>
<div class='unit'>1 kg</div>
<div class='ingredient'>flour (it should be wholegrain type</div>
</p>
<p class='recipeIngredient'>
<div class='unit'>2 pieces of big</div>
<div class='ingredient'>tomatoe</div>
</p>
There can be numerous rows.
I did this with floats and widths, but it doesn't play out well, so I am trying to use flex. In my example left column is 33% width and the right one is double the size. That is usually ok. But sometimes I get a longer line in the left column and sometimes in the right.
How can I make the widths fluid in a way if all of my rows in column one are short and the right rows are longer that have to be broken into two, the width proportions would change, giving only the needed space of the left or right column?
And another problem here is that I want to give priority to the left column if content is too long of both columns, the right one should break, not the left one, because it looks stupid if the column is like this:
up to 1 | wholewheet flower
kg
I would rather have the wholewheet flower would break and left side would keep together if possible. And if there is room on the left side, shrink column and give more space to the right one.
I am not sure if this is possible at all, because I have cells row based not column based and all should adapt acording to the whole, not each one separately, I would like all ingredients to be aligned (left side right justified and right side left justified).
There is one other problem I do have with my code. If I like to vertical align ingredient to the bottom instead of top so that it would read
up to 1 |
kg        | wholewheet flower
It looks better. But using flex to put it on bottom shrinks right cell to the content so the divider line is missing on top.
PS - Maybe this could be better done without using CSS grids? But I guess my structure is not the best for it, but it is needed for google smart cards.

Answer 1

Using table:
section {
display: table;
table-layout: fixed;
border: 1px solid;
max-width: 200px;
}
.recipeIngredient {
display: table-row;
}
.unit,
.ingredient {
display: table-cell;
outline: 1px solid;
padding: 5px;
}
.unit {
white-space: nowrap;
}
<section>
<div class='recipeIngredient'>
<div class='unit'>1 kg</div>
<div class='ingredient'>flour (it should be wholegrain type</div>
</div>
<div class='recipeIngredient'>
<div class='unit'>2 pieces of big</div>
<div class='ingredient'>tomatoe</div>
</div>
</section>