Вопрос в чем?
Сейчас это больше похоже на задание фрилансеру. Я юы рекомендовал открыть документацию официальную по реакт и прочитать от корки до корки, тогда вопросы поконкретнее будут.
Sergei Nazarenko, Умеет for в два условия для двух переменных в скобочках, если условия кривые, их нужно подправить чтобы сросталось. По хорошему for умеет в любое количество условий, но не уверен что это можно в скобочки запихнуть
1) Читай документацию https://css-tricks.com/snippets/css/a-guide-to-flexbox/
2) Вопрос ставь отталкиваясь от задачи, а не от своих фантазий.
Твоя раскладка решается при flex-direction: row и 100% базы у первого елемента.
3) ДЛя того чтобы было понятнее рисую номера дивов как они у тебя идут в HTML
tron21, У реакта виртуальный дом, получив ссылку на дом элемент вы не можете быть уверены присутствует он на странице или уже был удален. Чтобы манипулировать реальным домом используют ref но для того чтобы поиском проверить пристутствует ли елемент на странице, обычного поиска по id достаточно.
