How to align two elements from innerHTML?

Mr.Ulis :

I thought span would align the elements, but the button appears under the p-element.

for (let i = 0; i < arr.length; i++) {
  main.innerHTML += `
  <span>
    <p onclick="border(${i})">${arr[i].name}</p>
    <button>Delete</button>
  </span>`
}

Mamun :

p element is a Block-level element, you can set the display property to inline-block.

Demo:

var arr = [{name: "test"}]
var main = document.getElementById("main");
for (let i = 0; i < arr.length; i++) {
  main.innerHTML += `
  <span>
    <p onclick="border(${i})" style="display:inline-block">${arr[i].name}</p>
    <button>Delete</button>
  </span>`;
}

<div id="main"></div>