Estoy tratando de agregar un botón con JS a la etiqueta HTML div, después de agregarlo, me gustaría establecer su posición en la esquina derecha:

Pero cuando agregué margin-left, bajó una línea.
¿Cómo puedo arreglar esto?
el código:
function CheckForm(){ let form = document.getElementById('fcf-form-id'); if (form['Email'].value == "") { let x = document.getElementById('error-msg'); const button = document.createElement('BUTTON'); button.innerHTML = 'X'; x.innerHTML = "I need you to enter you Email in order to get back to you." x.appendChild(button); button.style.marginLeft ='95%'; x.setAttribute("style" , "opacity:1"); button.addEventListener('click' , () => { x.innerHTML =""; x.setAttribute("style" , "opacity:0"); } ) return false; }Configure el envoltorio para que sea relativo, configure el botón para que sea absoluto y configure la parte superior e izquierda.
.error { position: relative; background-color: yellow; border: 1px solid black; } .error .message { padding-left: 1em; } .error .close { position: absolute; top: 0; right: 0; } <div class="error"> <p class="message"> Hello World. It is foo. </p> <button class="close">x</close> </div>¿Puedes compartir el código para esto? Debe asegurarse de usar una relación de escala confiable como % y puede configurar el atributo de visualización del botón para bloquear en línea
display: inline-block;