Если вам не нужна поддержка IE9 и ниже, вы можете использовать flexbox для решения этой проблемы: codepen
Есть также несколько ошибок с IE10 и 11 ( поддержка flexbox ), но их нет в этом примере
Вы можете выровнять <button> и <form> по вертикали, поместив их в контейнер с flex-direction: column. Исходным порядком элементов будет порядок, в котором они отображаются сверху вниз, поэтому я изменил их порядок.
Затем вы можете горизонтально выровнять контейнер формы и кнопки с холстом, обернув их в контейнер с помощью flex-direction: row. Опять же, исходный порядок элементов будет в том порядке, в котором они отображаются слева направо, поэтому я изменил их порядок.
Кроме того, для этого потребуется удалить все правила стиля position и float из кода, связанного в вопросе.
Вот урезанная версия HTML-кода в коде, который указан выше.
<div id="mainContainer">
<div>
<canvas></canvas>
</div>
<div id="formContainer">
<div id="addEventForm">
<form></form>
</div>
<div id="button">
<button></button>
</div>
</div>
</div>
А вот соответствующий CSS
#mainContainer {
display: flex;
flex-direction: row;
}
#formContainer {
display: flex;
flex-direction: column;
}