password input shakes when I focus/unfocus on.username - css

Question

When I focus/unfocus on password, no shaking happens, but when I focus/unfocus on username then the password shakes...
Why is that happening & how to stop that?
body {
background-color: royalblue; /*#f0f0f0;*/
}
label {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
z-index: -1;
border: 0;
color: white;
position: relative;
}
.head {
color: white;
margin-left: 44%;
font-family: monospace;
font-size: 25px;
}
/*.content {
margin-top: 10%;
margin-left: 41%;
}*/
.password {
margin-top: 5%;
}
form {
position: relative;
}
input {
position: absolute;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
background: transparent;
border: 0; /* BORDER yes/no */
border-bottom: 2px solid beige;
background: transparent;
outline: 0;
height: 25px;
width: 180px;
z-index: 1;
margin-top: 5px;
}
/*input:focus {
outline: 1;
}*/
label::after {
content: '';
position: absolute;
top: 1px;
left: 0;
width: 180px;
height: 25px;
border-radius: 2px;
transition: transform .3s;
}
label::after{
z-index: -1;
background: beige; /*#a86bf;*/
transform: scale3d(1, 0, 1);
transform-origin: 0% 0%;
}
input:focus {
border-radius: 2px;
}
input:focus + label::after,
input:valid + label::after {
transform: scale3d(1, -1.3, 1);
transition-timing-function: linear;
top: -1px;
}
span {
position: relative;
margin-top: -30px;
display: block;
padding: .6em 0;
padding-left: -5px;
transition: top .5s ease, font-size .5s ease;
/* transition: transform 1s 2s;*/
top: 0;
}
input:focus + label > span,
input:valid + label > span {
top: -20px;
font-size: 11px;
padding-bottom: 15px;
}
/* font-family: monospace;*/
/*transform: translate3d(0, -80%, 0); */
/* transition-timing-function: linear;*/
<p class="head">Sign In</p>
<form>
<div class="content">
<div class="username">
<input name="name" class="user-input" id="user" required>
<label class="user-label" for="user"><span>Username</span></label>
</div>
<div class="password">
<input name="name" class="pass-input" id="pass" required>
<label class="pass-label" for="pass"><span>Password</span></label>
</div>
</div>
</form>

Answer 1

Add height to both div containers, so they keep it when clicked on.
body {
background-color: royalblue; /*#f0f0f0;*/
}
label {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
z-index: -1;
border: 0;
color: white;
position: relative;
}
.head {
color: white;
margin-left: 44%;
font-family: monospace;
font-size: 25px;
}
.username {
height:40px;
}
.password {
height:40px;
}
/*.content {
margin-top: 10%;
margin-left: 41%;
}*/
.password {
margin-top: 5%;
}
form {
position: relative;
}
input {
position: absolute;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
background: transparent;
border: 0; /* BORDER yes/no */
border-bottom: 2px solid beige;
background: transparent;
outline: 0;
height: 25px;
width: 180px;
z-index: 1;
margin-top: 5px;
}
/*input:focus {
outline: 1;
}*/
label::after {
content: '';
position: absolute;
top: 1px;
left: 0;
width: 180px;
height: 25px;
border-radius: 2px;
transition: transform .3s;
}
label::after{
z-index: -1;
background: beige; /*#a86bf;*/
transform: scale3d(1, 0, 1);
transform-origin: 0% 0%;
}
input:focus {
border-radius: 2px;
}
input:focus + label::after,
input:valid + label::after {
transform: scale3d(1, -1.3, 1);
transition-timing-function: linear;
top: -1px;
}
span {
position: relative;
margin-top: -30px;
display: block;
padding: .6em 0;
padding-left: -5px;
transition: top .5s ease, font-size .5s ease;
/* transition: transform 1s 2s;*/
top: 0;
}
input:focus + label > span,
input:valid + label > span {
top: -20px;
font-size: 11px;
padding-bottom: 15px;
}
/* font-family: monospace;*/
/*transform: translate3d(0, -80%, 0); */
/* transition-timing-function: linear;*/
<p class="head">Sign In</p>
<form>
<div class="content">
<div class="username" >
<input name="name" class="user-input" id="user" required>
<label class="user-label" for="user"><span>Username</span></label>
</div>
<div class="password" >
<input name="name" class="pass-input" id="pass" required>
<label class="pass-label" for="pass"><span>Password</span></label>
</div>
</div>
</form>

Answer 2

What I think's happening is that your CSS is adding a small margin to the bottom of the <div class="username"> and this is causing your "shaking". The reason it's not happening when you click on the Password is because there's nothing under it.