span css is not working properly

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