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 demo.

This is what mine looks like here.

I don't understand how i can align my 3 items. Could someone enlighten me please ?

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%;
}

CodePudding user response：

In CSS add display flex to #notif > form.

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

CodePudding user response：

Replace justify-content: center; with justify-content: space-around;. Also this property (justify-content) works with display: flex;.

#notify > form {
  display: flex;
  justify-content: space-around;
}