Problem polega na tym, że gdy walidacja formularza wyświetla komunikat błędu pod jednym z inputów, to układ elementów na stronie staje się nieuporządkowany. Konkretnie, komunikat błędu powoduje, że pole input i przycisk "wyślij" przesuwają się w dół tylko dla tego jednego pola, co powoduje, że przyciski nie są wyrównane w jednej linii poziomej.
Początkowy układ: Mamy dwa pola input z przyciskami "wyślij" obok siebie. Początkowo układ wygląda estetycznie, ponieważ oba przyciski są na tej samej wysokości.
Walidacja: Gdy użytkownik klika przycisk "wyślij" i jedno z pól input nie przechodzi walidacji, pojawia się komunikat błędu pod tym polem input.
Niezrównane elementy: Ponieważ komunikat błędu pojawia się tylko pod jednym polem input, wysokość tego kontenera zwiększa się, powodując przesunięcie przycisku "wyślij" w dół tylko dla tego jednego pola. W rezultacie, przyciski nie są już wyrównane w jednej linii, co wygląda nieestetycznie.
Jak do tego podejsc?
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>
wyslij
</div>
</div>
</button>
</div>
</div>
<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>
wyslij
</div>
</div>
</button>
</div>
</div>
</div>