Align image vertical in responsive textbox - html

Question

I have a responsive text box with a label that shifts up on a focus and if text box has input. I am trying to add an image to the right side of the text box that is aligned middle with the text box input. But the image is shifted down.
HTML:
<div style="margin-top: 20px">
<input class="responsiveTextBox" type="text" id="clientName" required="required" />
<img src="https://s31.postimg.org/6bym9bjnf/reset.png" class="resetImage">
<label class="responsiveLabel" id="lblClientName" for="clientName">Client Name</label>
<div class="bar"></div>
</div>
CSS:
.responsiveTextBox{
outline: none;
z-index: 1;
position: relative;
background: none;
width: 100%;
height: 60px;
border: 0;
color: black;
font-size: 16px;
font-weight: 400;
}
.responsiveLabel {
position: absolute;
top: 0;
left: 0;
color: #757575;
font-size: 20px;
font-weight: 300;
line-height: 60px;
-webkit-transition: 0.2s ease;
transition: 0.2s ease;
}
.responsiveTextBox:focus ~ label {
color: #9d9d9d;
-webkit-transform: translate(-12%, -50%) scale(0.75);
transform: translate(-12%, -50%) scale(0.75);
}
.responsiveTextBox.hasValue ~ label {
color: #9d9d9d;
-webkit-transform: translate(-12%, -50%) scale(0.75);
transform: translate(-12%, -50%) scale(0.75);
}
.responsiveTextBox:valid ~label {
color: #9d9d9d;
-webkit-transform: translate(-12%, -50%) scale(0.75);
transform: translate(-12%, -50%) scale(0.75);
}
.bar{
position: absolute;
left: 0;
/*bottom: 0;*/
background: #757575;
width: 100%;
height: 1px;
}
.resetImage{
float: right;
vertical-align: middle;
}
JSFIDDLE
Any suggestion how to resolve this issue?

Answer 1

Your input width is 100%, you need to reduce it and remove the float property from the img for vertical-align: middle to works
.responsiveTextBox{
width: 95%;
}
.resetImage {
vertical-align: middle;
}
Fiddle