html - span css is not working properly -

i want display span tag after input tag.

but displays before input tag. here attached css , 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> 

i not having image placed 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>