1. Расположить элементы так, как на картинке, проще всего заданием width, float и clear для них. И это логично, флоаты как раз предназначены для всевозможных обтеканий.
2. Чтобы отступы между картинкой и текстом не скакали, была ровная сеточка, а строки в разных блоках совпадали по вертикали, имеет смысл жестко привязать ее (картинки) высоту к EM/REM. Вообще удобно все к этим единицам привязывать, но это уже другая история.
3. Исходя из пункта 2, нужно добавить media-выражения для картинки на разные размеры экрана. Да, это лишняя работа. Да, это не чик-чик и в продакшен, но если важны мелочи в дизайне - делаем.
4. На маленьких экранах все это будет плохо восприниматься, так что выстраиваем элементы в столбик. Ширина в 100% всему. По уму контент важнее, чем aside, так что меняем их порядок с помощью свойств flex, flex-direction и order.
Получится что-то такое:
