I am working on a HTML / CSS / JS project and I'm currently editing a website to add a panel for notifications. Here is how it's supposed to look like.

This is what mine looks like.

How can I align my three items?

Here is my JavaScript code to write the HTML :

function notifElement() {
  const notifUrl = 'https://smart4.io/centralizer';
  const container = document.createElement("div");
  //const aeL = document.createElement("a");

  container.id = "notif";
  const form = document.createElement("form");
  const leftArrow = document.createElement("button");
  leftArrow.name = 'leftButton'
  leftArrow.innerHTML = '&lt'

  const rightArrow = document.createElement("button");
  rightArrow.name = 'rightButton'
  rightArrow.innerHTML = '&gt'
 
  const middleContainer = document.createElement("div");
  middleContainer.id = "middle";
  const middlebutton = document.createElement("button");
  middlebutton.name = 'middleButton'

 
  const text = document.createElement('p')
  t.textContent = 'Lorem Ipsum';
  
  middleContainer.appendChild(t);
 
  form.appendChild(leftArrow);
  form.appendChild(middleContainer);
  form.appendChild(rightArrow);

  container.appendChild(form);
  return container;
 }

And here is my CSS code :

#notif {
  max-width: 720px;
  margin: auto;
  text-align: center;
  position: relative;
  width: 100%;
  height: 12em;
  z-index: 1;
  justify-content: center;
}

#notif > form {
  padding-right: 3em;
}

#notif > form > button {
  border-radius: 50%;
}