If I can explain the whole logic it may be easier to understand but there are a few concepts that we need to work with and around.
Firstly you want the height of the text content to dictate the height of the two images so they match the total height of the text. Although with css (grid/flexbox) we can equalise both columns, the tallest column will always dictate the height of the other column. Therefore when we want an image to only occupy 50% height of the text we can’t simply set the image to 50% height because the browser won’t be able to work out what height that is as that column’s own height will be based on its own content (i.e. its images). It’s a circular reference that CSS can’t resolve (although you may find that the odd browser will attempt to do this). e.g. my height is twice the height of something that is half my height; and the height of the smaller something is half the height of my height!
In order to solve this conundrum I remove the image from the flow with absolute positioning. This means that the height of the right column is solely dependent on the height of the text in the left column as grid makes the equal column automatically.
An absolute element is removed from the flow and placed in relation to its nearest ancestor that has a position defined (other than static). If none exists it is placed in relation to :root (effectively the body element). In order to make the image start in the right column we apply position:relative to the right column (which does not alter its position or appearance) and now the image can be placed absolutely using the right column as its point of reference.
An absolute element always knows the top, right, left and bottom of a relative parent (unlike static elements) and we can use that knowledge to make our image 50% of the height of that area. It is then just a matter of placing the first image at top:0 and then the second image at top:50% and setting the image height to 50%. Note that I used 46% image height and top:52% just to make space between the images but if you wanted no space then they would all be at the 50% value.
To recap an absolute element is placed in relation to its nearest positioned ancestor. Note that absolute elements are removed from the flow and do not affect the height of the parent at all. If the parent has no height then there will be nothing to show. However in our case, and as is the case with grid or flexbox or table cells, you can have columns that equalise automatically to the tallest content even if some items have no content (as would be the case with absolutely placed children).
Hope that explains it