JavaScript

Manipulating DOM Elements Part 2

.container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#square-div {
  height: 200px;
  width: 200px;
  background-color: mediumvioletred;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

#circular-div {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background-color: palevioletred;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}


let squareDiv = document.getElementById('square-div');
let circularDiv = document.getElementById('circular-div');
squareDiv.appendChild(circularDiv);
