The problem of placing 3 columns in two rows, how to fix?

Question

css

Greetings!

It is necessary to place 3 columns in 1 container but in two rows, where:
1. The first 2 columns are placed in 1 row and occupy the minimum space required for each.
2. The third column is placed in the 2nd row and takes up all the free space of the container.

Problems in the example below:
- Example 1: how you want to see it (in this case, for example, I had to set a fixed width for the container, but I want the width to be set automatically, depending on the width of the columns occupied).
- Examples 2-4: everywhere there is a place in the first row, although the column is visually not there.

What options are there?

Answer 1

https://codepen.io/herr-imko/pen/NWXJweO