Designs like this are really only achievable using flexbox which limits then to the most modern browsers only.
There are ways to do it with other methods but involve separating the data a little. One way to achieve the effect is to think of each row as a table row and so along the top row you would have the text for the two items in adjacent cells. Then you close the row and start another one and in the next two adjacent cells you put the images. That means that the text and images will always be aligned correctly no matter how much content.
You can use display:table/ row / cell properties for this so you don't need a real table but the drawback is the separation of data as they are no longer self contained units. This may or may not matter to you so could be the solution.
There is however one big drawback of this method is you want the data to align in one column for small screens and then the problem of separate data bites you because you can no longer have text followed by an image underneath because you would just get two lots of text followed by two lots of images. In order to satisfy smaller screens you would then perhaps need to duplicate content in hidden divs and show and reveal as necessary using media queries and things are getting really complicated now :).
Maybe the easier solution is just to give a min-height to the text so that it satisfies most cases. No need to absolutely position the image. I would use nline-block instead of floats so that you don't have snagging issues on each row.