Forgive me for asking such a basic question, but I struggle with aligning and positioning elements. Here is my issue: https://i.sstatic.net/Uy6XB.jpg
https://i.sstatic.net/TTs6V.jpg
All I want is for the glyphicon to be displayed next to the textfield, not above it. I attempted placing it inside the form tag, but the outcome remains unchanged. Below 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>
Additionally, I have a script that reveals the glyphicon if the password is incorrect. (it essentially functions as a password-enabled textfield)
<?php
echo "<script type='text/javascript'>
$('#loginwrong2').show();
</script>";
?>