I'm trying to configure an extremely basic animation effect in which hovering over a div animates a form element alongside it from 0 to 100% width using a CSS transition. Here is a fiddle for reference. I'm experiencing two issues: first, in this case, the <p> element and <form> elements are not lining up vertically, despite being set to display:inline-block and vertical-align:top. Secondly, on hover in widening the form element to 100%, it's dropping below the <p> element; does anyone know what's going on here?
#wrapper {
display: inline-block;
position: absolute;
top: 0;
left: 0;
text-align: left;
vertical-align: top;
border: 1px solid #000;
margin: 0;
padding: 0;
}
#wrapper p {
font-size: 16px;
display: inline-block;
vertical-align: top;
text-transform: uppercase;
background-color: rgba(255, 255, 255, 0.5);
padding: 0.5em 1em;
cursor: pointer;
}
#wrapper:hover form#access {
width: 100%;
}
form#access {
display: inline-block;
width: 0%;
margin: 0;
padding: 0;
overflow:hidden;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
form#access input {
font-size: 18px;
display: inline-block;
vertical-align: top;
padding: 0;
margin: 0;
border: none;
max-width: 100px;
} <div id="wrapper">
<p>Enter code:</p>
<form id="access">
<input placeholder="code" id="access-code" name="access-code" type="text" tabindex="1" required>
</form>
</div>You're setting your form to 100% width on hover, which would take the entire width of its parent. You can either lower that percentage so that it fits on a single line with the paragraph, or simply add this to #wrapper:
white-space: nowrap;