The buttons below run fine on their own, but when grow and rotate are both in effect then the big, rotated box overlaps with text... How do I get the big box to change its margins ONLY when the rotate button is also pressed?

//Press "grow" button box grows 
document.getElementById('button1').addEventListener("click", growBtn); 
function growBtn() { 
    document.getElementById('box').style.height = "300px"; 
    document.getElementById('box').style.width = "300px";
}

//Press "rotate" button box rotates 
//Margins added to keep the box from overlapping on text 
document.getElementById('button4').addEventListener("click", rotateBtn);
function rotateBtn() { 
    document.getElementById('box').style.transform = "rotate(45deg)";
    document.getElementById('box').style.marginBottom = "50px"; 
    document.getElementById('box').style.marginTop = "50px"; 
    document.getElementById('box').style.marginLeft = "50px"; 
}

I'm new to JS so I may need to be pointed to a resource or given deeper explanation on how the answer works.