span css is not working properly - html

Question

I want to display span tag after input tag.
But it displays before input tag.
Here I attached css and html code.
http://jsfiddle.net/sarurakz/8j3r13ec/
CSS:
span{
float:right;
margin-right:1%;
}
input {
display: inline-block;
float: right;
margin-right:20%;
}
Html:
<p>Password<input type="password" name="pass" id="pass" size=18 maxlength=50 required></p>
<p>Confirm Password<input type="password" name="cpass" id="cpass" size=18 maxlength=50 required><span id='message'></span></p>
validation:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$('#pass, #cpass').on('keyup', function () {
if ($('#pass').val() == $('#cpass').val()) {
$('#message').html('<img src="image/tick.png" width=15px height=15/>').css('color', 'green');
$("#phone").prop('disabled', false);
}
else{ $('#message').html('<img src="image/delete1.png" width=15px height=15/>').css('color', 'red');
$("#phone").prop('disabled', true);}
});
</script>

Answer 1

I was not having any image so i just placed a random text there in span
span{
float:right;
margin-right: 8%;
margin-left: -17%;
}
input {
display: inline-block;
float: right;
margin-right:20%;}
<p>Password<input type="password" name="pass" id="pass" size=18 maxlength=50 required></p>
<p>Confirm Password<span id='message'>asdasd</span><input type="password" name="cpass" id="cpass" size=18 maxlength=50 required></p>

Answer 2

I wish a fiddle was there for this, but as per my understanding you can try to add float: left to both input and span

Answer 3

You cant do the validation and adding the tick image just with HTML and CSS. You will need to do the validation in Javascript.
See this working code snippet:
document.getElementById('pass').addEventListener('blur', function(){
var passwordLength = document.getElementById('pass').value.length;
if(passwordLength > 8 && passwordLength < 50){
var image = document.createElement('img');
image.src = 'http://yoozy.com/images/tick-icon.jpg';
this.parentNode.insertBefore(image, document.getElementById('pass'));
}
});
span{
float:right;
margin-right:1%;
}
input {
display: inline-block;
float: right;
margin-right:20%;
}
<p>Enter atleast 8 characters in this first password field and focusout to see thie validation working.</p>
<p>
Password
<input type="password" name="pass" id="pass" size=18 maxlength=50 required>
</p>
<p>
Confirm Password
<input type="password" name="cpass" id="cpass" size=18 maxlength=50 required>
<span id='message'></span>
</p>

Answer 4

use label and padding right and align the span position absolute
using label automatically focuses the input on click of text
label {
width: 400px;
display: inline-block;
padding: 0 30px 0 0;
position: relative;
margin: 5px 0;
}
input {
float: right;
}
span.icon {
font-size: 14px;
color: white;
text-align: center;
display: block;
line-height: 23px;
background: rgb(18, 208, 27);
border-radius: 50%;
width: 20px;
height: 20px;
right: 0px;
position: absolute;
top: 0;
}
<label>username
<input type="text" name="pass" id="pass" size=18 maxlength=50 required />
</label>
<label>Password
<input type="password" name="pass" id="pass" size=18 maxlength=50 required /> <span class="icon">✓</span>
</label>