@Saad-Hisham
Posted
Hi Arianna! ๐โโ๏ธ Congratulations on completing the challenge! To align the input and button on the same line just give the form flex property
form {
height: 50px;
display: flex;
}
Keep up the great work and happy codingโจ
@unachoza
Posted
@Saad-Hisham thank you for this comment, however adding display: flex; to the form element interferes with the <div class="error-message">. the error message will show up inline with the input and button or if I add flex-direction: column to the form, after the error occurs, all three elements are on separate lines. My hack fix was to move the error message out of the <form> entirely. There has to be another way... thoughts?
@Saad-Hisham
Posted
@unachoza add these changes to your code the left prop on error message customize it as you desire
form {
position: relative;
}
.error-message {
position: absolute;
top: 51px;
left: ;
}
there also another way to make the error message is pseudo element using ::after or ::before
Marked as helpful
@unachoza
Posted
@Saad-Hisham thank you!
