Можно pointer-event менять (вариант с opacity и перекрытием содержимого; или вообще z-index поменять для активного состояния);
можно связку opacity + visibility использовать;
можно display + opacity через animation.
Странное задание. Очистить флоаты можно и через overflow, например.
Ну да, вставьте абсолютно позиционированный контейнер для стилизации фона позади колонок, если уж такие требования.
Что касается ширины – если можно calc использовать, то юзайте ее:
.column:nth-child(2) {
width: calc(80% - 200px);
}
Так не плодите сущности. Стрелочка явно относится к самому блоку – пусть сам блок отвечает за свое состояние, а стрелка уже от него подтянет нужные стили.
.div.open { }
.div.open .arrow-test { }
Установите для нужных картинок ширину в 100% (будет занимать всю ширину своего контейнера). Высота элемента img устанавливается автоматически с учетом пропорций изображения.