Faliah

У каждой формы вы, в дополнение к position: absolute;, можете указать top:0; right: 0;, но контейнер, в котором у вас отображаются формы, должен иметь position: relative;

А это такое требование, чтобы блоки по краям у вас вылезали за .container из-за position absolute?

Для начала, ответ на вопрос - да, частое использование transition в css может лагать сайт

Анимации могут добатить лагов, если сделаны без понимания сути работы механизма. В частности самыми дешевыми на данный момент (применимо к chrome и частично firefox, не могу сказать за IE и Edge) являются анимации свойств opacity, различные transform: translate, scale, rotate.
Последнее время в этих вопросах я почитываю различные метериалы от инженера Google Paul Lewis'а, вот ссылки на несколько материалов:
Статья из его личного блога по animation performance
Статья по animation performance совместно с Paul Irish
Нереально крутой туториал по параллаксу, от которо...
Плейлист в Google Developers на Youtube, где Пол и...

Если сам опросник у вас будет храниться в памяти, то можете делать хоть на github pages. С другой стороны - применять SPA фреймворк без работы с бэкендом какого-либо вида (socket, rest) это как из пушки по воробьям. Для отрисовки и связывания компонентов вам и голого React хватило бы.

Но ответ на ваш вопрос - не нужна

Во-первых littleguga прав на счет

<div class=="book">, уберите одно равно

Во-вторых Предположу, что <img class=" right"> задаёт выравнивание по правому краю (float: right). При выравнивании элементов они выпадают из потока и родительский элемент схлопывается до высоты, занимаемой тэгом h2 в вашем случае.

Если мое предположение верно, то вам необходимо воспользоваться свойством (clear: both), выглядеть это должно примерно так:

.book:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}

В в конец содержимого элемента .book будет добавлен блочный элемент с нулевой высотой, что предотварит его схлопывание.

Посмотреть как это работает можно тут https://jsfiddle.net/zqww24ok/