Align div below other elements and align its text vertically

I've got the following issue. I've got a div where I'm unable to vertically align its text and also unable to place it below other divs. My div:

<div th:text="#{mailContent.resetBtn}" style="
border: 0;
color: white;
height: 25px;
display: table-cell;
background-color: #FD8907;
cursor: pointer;
border-radius: 2px;
outline: 0;
text-align: center;
font-family: 'Rubik', sans-serif; 
font-size: 16px; 
padding: 50px;
display: table;
margin: 0 auto;
vertical-align: middle;
"> 
    RESET PASSWORD
 </div>

It ends up looking like this

I want it to be below the text that says "click on the following button...". And I also find it impossible to set some padding to the text and centering it. (Padding there is exaggeratedly set to 50px but it doesn't work anyways).

Full code: https://pastebin.com/NqgXs4tD