The problem is that when the form validation displays an error message under one of the inputs, the layout of elements on the page becomes disordered. Specifically, the error message causes the input field and “submit” button to move down only for that one field, resulting in the buttons not being aligned in a single horizontal line. Initial layout: We have two input fields with “submit” buttons next to each other. Initially, the layout looks aesthetically pleasing because both buttons are at the same height. Validation: When a user clicks the “submit” button and one of the input fields fails validation, an error message appears under that input field. Misaligned elements: Because the error message appears only under one input field, the height of that container increases, causing the “submit” button to move down only for that one field. As a result, the buttons are no longer aligned in a single line, which looks unsightly. How should I approach this?
https://codepen.io/dcielak/pen/ExzoENq
<div class="inputs">
<div>
<div>
<input type="text" name="email" placeholder="Wpisz adres e-mail..." />
</div>
<div class="hidden">Podany e-mail jest błędny, wpisz poprawny adres</div>
<div>
<button href="#">
<div>
<div>
send
</div>
</div>
</button>
</div>
</div>
<div>
<div>
<input type="text" name="email" placeholder="Wpisz adres e-mail..." />
</div>
<div hidden">Podany e-mail jest błędny, wpisz poprawny adres</div>
<div>
<button href="#">
<div>
<div>
send
</div>
</div>
</button>
</div>
</div>
</div>