Why does the picture flatten in this case?

Question

css

Code If there is not enough text in the block, then everything is ok, but if there is a lot of text, then the pictures are flattened horizontally in different ways, one is a little less, one is a little more. Why is this happening? The image has a specific width and height, shouldn't it be the same?
Maybe it's all to blame?

display: flex;
  justify-content: space-between;

Answer 1

Specify that the image cannot be compressed - flex-shrink: 0;
In the context of flexbox, any element behaves like a flex box. The width of such a block is calculated based on the content and parameters flex-grow, flex-shrink, flex-basis.
You can also use max-width, min-width for restrictions, but I think this is a crutch in this context.

Answer 2

I looked at your example there and added and subtracted text image what it was and remains