Roman Chuvilev

document.querySelector("header").backgroundColor =
window.getComputedStyle(document.body.querySelector(".colorful-component")).backgroundColor;

Медленно, но универсально.

HTML tables, самая лучшая поддержка браузерами, со времен HTML 2.0, если не ошибаюсь.

https://www.w3schools.com/howto/howto_css_bg_chang...

https://www.w3schools.com/howto/howto_css_parallax.asp

У виджета (блок или компонент) кнопки 3 состояния:
1-просто кружок с после загрузки,
2-с добавленным баблом (появляется по setTimeout, плюс вешается clearTimeout по клику, если чел сам нажал)
3-с закрытым бабблом и открытым чатом (на клик по кнопке и бабблу вешается закрытие баббла и открытие модальника с чатом)
И снова состояние 1, если чат свернули (вешаешь на клик по кнопке показ модалки с чатом, на outerclick/"свернуть чат" - скрытие модалки с чатом.
Таким образом, верстаешь эти все части и вешаешь обработку событий на переходы между ними. Сам чат имеет уже свою беково-фронтовую реализацию.

Если верстка с логикой, Vue.
Если ты хочешь именно прогать на JS, то реакт.

https://github.com/columbiafront/boilerhat
Мое поделие, рекомендую
Pug + stylus/css + typescript/js. Включены многие используемые либы (можно отключать). Как-то так.

PHP => HTML data attribute => Vue.

Попробуйте на событие onFocus повесить функцию, берущую данные, пробрасывающую их в Ваш объект и выставляющую в сайдбар значение из объекта.

.items {
display: inline ИЛИ table-cell;
line-height: 100%;
vertical-align: middle;
}

ИЛИ

.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
ALIGN-ITEMS: CENTER;
}

Навскидку напрашиваются бордеры + бордер-радиусы + относительно позиционированные указатели стрелок.

Добавить в CSS:

media (max-width: 768px) {
.z1 {
flex-direction: column-reverse;
flex-wrap: nowrap;
}
}

1. Заменить тег footer на header в html и стилях.
2. Переместить получившийся блок в структуре html на его место.
3. Порефакторить стили, чтобы получилось то, что задумали.

Более многословно, но ИМХО
более структурно верно (посмотрите на поведение блоков).