html - Alignment issue when confirmation box appears

Question

The layout I have looks perfect initially Image of correct layout, but when the success message shows up, my email box moves down to let the success box display. Image of incorrect layout.

My html code below:

<form id="sib_signup_form_1" method="post" class="sib_signup_form">
<div class="sib_loader" style="display: none;"><img src="/wp-includes//images/spinner.gif" alt="loader"></div>
<input type="hidden" name="sib_form_action" value="subscribe_form_submit">
<input type="hidden" name="sib_form_id" value="1">
<input type="hidden" name="sib_form_alert_notice" value="Please fill out this field">
<input type="hidden" name="sib_security" value="1cd8f2c7fa">
<div class="sib_signup_box_inside_1">
<div style="" class="sib_msg_disp"><p class="sib-alert-message sib-alert-message-success " style="display: none;">Thank you, you have successfully registered!</p></div>
<div class="sib-email-area">
<input type="email" class="sib-email-area" name="email" placeholder="Your email address" required="required">
<input type="submit" class="sib-default-btn" value="Sign up">
</div>
</div>
</form>

My css code:

[form] {
position: relative;
-moz-box-sizing:border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
[form] input[type=text],[form] input[type=email], [form] select {
width: 72%;
padding: 0 15px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
background-color: #fff;
height: 45px;
border: 0;
font-size: 14px;
}
[form] .sib-default-btn {
width: 30%;
min-width: 80px;
position: absolute;
top: 0;
right: 0;
height: 45px;
padding: 0 15px;
border-radius: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
color: #fff;
background-color: #dc9814;
font-family: inherit;
font-size: 14px;
font-weight: 400;
text-transform: capitalize;
}

The idea should be that both email box & button move down, when the success box displays. Would you have any suggestions to solve this? Thank you very much in advance.

Kind regards, Quinten

question from:https://stackoverflow.com/questions/66045364/alignment-issue-when-confirmation-box-appears

Answer 1

Waitting for answers