Август Милович

Примерно

let input = document.querySelector(".input");
let defaultText = input.value;

let notSavedAlert = document.querySelector(".notSavedAlert");
let saveButton = document.querySelector(".saveButton");

//нажата кнопка
input.addEventListener("keyup", checkInputText);
saveButton.addEventListener("click", saveInputText);

function checkInputText(e){
   if(input.value != defaultText){
     //функция которая выводит "не сохранено"
    notSavedAlert.style.display = "block";
    
    //выход из функции, чтобы действия ниже не выполнялись
    return false;
  }

  notSavedAlert.style.display = "none";
}

//сохранение нового текста по нажатию кнопки
function saveInputText(){
 defaultText = input.value;
}

Короче при нажатии кнопки, если текст совпадает с первоначальным текстом, то надпись скрывается, если не совпадает, показывается. По нажатию на кнопку сохранения первоначальным текстом становится текст в инпуте на данный момент. И так же делаешь с textareaa

На самом деле, чтобы на счёт этого не болела голова, используйте autoprefixer. Чаще всего его устанавливают как плагин gulp.

elem:hover{
transform: scale(1.4);
z-index: 2;
}

Так точно раздвигаться не будет