Pervachok

display: flex ;//для блока внутри которого находятся элементы
flex-direction: row;

можна всё обернуть в еще один блок и задать ему
display: flex;
flex-direction: row;
align-items: center;

но те два маленьких блока тоже нужно обернуть в блок
такое корявое решение)

попробуй как то так htmlbook.ru/css/z-index , наложить блоки один на другой, а не вкладывать

это из за области видимости, var создает глобальную переменную

вот так попробуй:

for (let i = 0; i <= 3; i++) {
alert(i);
}
alert('i равна = ' + i);