Андрей Федоров

Используйте position: absolute и z-index для части текста. При этом нужно повесить на событие onfocus поля ввода display: none для этого текста.

height: 100vh;
box-sizing: border-box;

Используете input type="hidden" value="10"... Потом уже в PHP, перемножайте нужные переменные.

У блока #hint должна быть не только position: absolute, но и родитель с position: relative, который собственно и задает точку отчета для абсолютной позиции #hint. Если его нет, позицию задает элемент body.

Попробуйте так:
codepen.io/aliencash/pen/ObmVzd

Задавайте фон родительскому элементу. Значение фона у вашего блока оставьте пустым. Тогда при смене фоновой картинки блок останется без изменений.

Ну так надо адаптацию для мобильных делать без ошибок:
<meta name="viewport" content="width=device-widt">

Один из верных вариантов:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Посмотрите тут:
codepen.io/aliencash/pen/VmZRpL

.child {
flex: 1 0;
}
.child:last-child {
margin-left: 3%;
}

если колонок больше двух:

.child {
flex: 1 0;
}
.child:not(:last-child) {
margin-right: 3%;
}