Inserting an element prevents click event from firing

I have a simple form validator. When you click away from the input, it displays an error message (when necessary).

However, I have noticed a side effect. When the error message is inserted into the form, it shifts the submit button downward, which prevents the submit event from firing.

Take a look at the snippet below. This overly simplified example emulates the problem. Try clicking on the input and then the button. You’ll notice that the button’s click event won’t fire because it is shifted downwards.

function insert() {   
  var button = document.querySelector('button');
  document.body.insertBefore(document.createElement('div'), button);
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
}

<input onblur="insert()" />
<button onclick="alert()">Click</button>

How can I resolve this problem? Keep in mind that for my form validator, the button is of type submit and the event that won’t fire is the form’s submit event, but the same concept can clearly be applied here.