Grione, https://jsfiddle.net/a87kthvg/
Я, если честно, не поняла что не так.
Если текста мало, то 250, если много, то изображение по высоте как контент.
Я могу внятно объяснить, почему может быть неудобно писать элементы, как у вас в примере. Потому что это затрудняет поиск по проекту.
Этот же аргумент можно применить и к вашему второму варианту. Если разных модификаторов много и их значения могут повторяться, то запись такого вида --size--small найти проще, чем отдельно size, отдельно small.
Флоаты для сеток не используют уже лет 10 или близко к тому.
Для этого есть flex и grid.
А у них есть column-gap (row-gap, просто gap). Правда, с разной степенью поддержки, проверяйте на caniuse.
RandomProgrammer, главное понимать в каком случае от чего считаются проценты.
Для высоты они считаются от высоты родителя.
Если высота родителя тоже в процентах, значит, нужно узнать какая высота у его родителя.
В теории так можно дойти до вьюпорта и всё будет хорошо.
Или дочерний может быть абсолютом, а у родителя высота вообще не задана, а определяется по содержимому.
Вы ведь можете обвести элементы рамочками (outline, outline-offset), да и проверить, что будет.
И псевдо не нужен.