We have the staff login panel to be authenticated against our Zimbra email server. But insted of having our staff typing their full email address, we only require them to type in just their username portion. So if john@example.com wants to login, he only type in john.
On the staff login form, I want to append @[deleted] after the username field. So I edited ~/include/staff/login.tpl.php like so:
<form action="login.php" method="post">
<?php csrf_token(); ?>
<input type="hidden" name="do" value="scplogin">
<fieldset>
<input type="text" name="username" id="name" value="<?php echo $info; ?>" placeholder="username" autocorrect="off" autocapitalize="off"> <USERMENTION username="example.com">@example.com</USERMENTION>
<input type="password" name="passwd" id="pass" placeholder="password" autocorrect="off" autocapitalize="off">
</fieldset>
<input class="submit" type="submit" name="submit" value="Log In">
</form>
BUT, the result is NOT good , as shown in the image below:

How do I make the @[deleted] to be on the same line with the username field? I am not good with css, so I appreciate some assistance. TIA.