Как при помощи только CSS и HTML вывести два квадрата на всю ширину окна браузера (вне зависимости от разрешения)?
Чтобы создать квадрат, нужно указан нужную ширину блоку, не указывать высоту, добавить :after, и ему уже указать padding-bottom: 100%
пример https://jsfiddle.net/Vlad_IT/qb3xo02j/
Сейчас уже так пишу. Раньше долбался всякими inline-block и floaтами.wrapper {
    display: flex;
    flex-flow: row nowrap
  }
  .red {
    flex: 1 0 50%;
    background: red;
  }
  .blue {
    flex: 1 0 50%;
    background: blue;
  }