how to align a glyphicon to a form?


I'm very sorry if this is just a simple question but I'm really bad
when it comes to alignment/positioning of elements and stuff like that
so here it goes.



My problem is shown here:
rel="nofollow">http://imgur.com/a/xscLJ



src="http://i.stack.imgur.com/TTs6V.jpg" alt="picture of the
issue">



I just want the glyphicon to appear beside the textfield not above
it. Just that. I tried putting it inside the form tag but the result
is the same. Here is my code.



<div id="form" class="collapse in">
<div id="loginwrong" style="display: inline-block;
vertical-align: top;">
<div id="loginwrong2" style="display: none;">
<span class='glyphicon glyphicon-remove-circle'
style="color: red; font-size: 2em;"></span>
</div>
</div>

<form method="POST" class="form-inline" role="form">
<input type="password" name="pw" placeholder="Enter
Password" class="form-control">
<input type="submit" class="btn btn-primary"
name="submit" value="Submit">
</form>
</div>


I also have a script that will show the glyphicon if the password
is wrong. (it's basically a password-accepting textfield)



<?php
echo "<script type='text/javascript'>
$('#loginwrong2').show();
</script>";
?>

- Technology - Languages
+ Webmasters
+ Development
+ Development Tools
+ Internet
+ Mobile Programming
+ Linux
+ Unix
+ Apple
+ Ubuntu
+ Mobile & Tablets
+ Databases
+ Android
+ Network & Servers
+ Operating Systems
+ Coding
+ Design Software
+ Web Development
+ Game Development
+ Access
+ Excel
+ Web Design
+ Web Hosting
+ Web Site Reviews
+ Domain Name
+ Information Security
+ Software
+ Computers
+ Electronics
+ Hardware
+ Windows
+ PHP
+ ASP/ASP.Net
+ C/C++/C#
+ VB/VB.Net
+ JAVA
+ Javascript
+ Programming
Privacy Policy - Copyrights Notice - Feedback - Report Violation 2018 © BigHow