Need help UI text alignment

Question

I have below html code in jsp page which references to css stylesheets. This oage was developed by UI developer and I am trying to extend the functionality by adding password guidelines message to display next to New Password and Confirm New Password fields. But guidelines are not getting displayed where I wanted to. I am new to UI side. Could you help me here?

<div role="main" class="reset-passwd loginscreen">                      
            <!-- Main Content Starts -->
            <div class="container-fluid">           
                <div class="row">
                    <div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 reset-content">
                        <h1>Reset Password</h1>
                        <!--login form start here-->

                        <p>Please enter the information below to complete your password reset.</p>
<%
    // Retrieve the error code returned by the servlet and display as the message
    String errorCode = null;
    errorCode= (String) request.getAttribute("ErrorCode");


    if (errorCode !=null && !errorCode.equals("")) {
    errorCode = errorCode.substring(12,errorCode.length());
    errorCode = errorCode.substring(0,errorCode.length()-1);    
 //errorCode = errorCode.replace(".","\\n");
 %> 
</br>
<p align="left"><font color="red" size="3px">The required password rules were not met. Please see the guidelines below.<% //out.println(errorCode); %></font></p>
<% }%>                      
                        <form class="form-horizontal" role="form" name="frmPwdReset" id=login method="POST" action='PasswordReset'>
                          <div class="form-group">                          
                            <div class="col-sm-4">
                              <input type="password" class="form-control real_pass" placeholder="New Password" name="pwd" id="pwd" size="50"/>
                              <input type="text" class="form-control fake_pass"  id="" value="New Password" style="display:none"/>
                            </div>
                            <a  title="*Password must start with an alphabetic character  
*Password must be at least 7 character(s) long  
*Password must contain at least 1 special character(s)  
*Password must contain at least 1 uppercase letter(s)  
*Password must not match or contain First Name  
*Password must not match or contain Last Name  
*Password must not match or contain User ID" class="xfe" onclick="return false;" href="#"><i class="ico ico-dim14x14 ico-info top-margin-10 hidden-xs">&nbsp;</i></a>
                        </div>   
                          <div class="form-group">                          
                            <div class="col-sm-4">
                              <input type="password" class="form-control real_pass1" placeholder="Confirm New Password" name="cnfpwd" id="cnfpwd" size="50"/>
                              <input type="text" class="form-control fake_pass1"  id="" value="Confirm New Password" style="display:none"/>
                            </div>
                          </div> 
                          <hr/>
                          <div class="form-group">
                          <table align="center">
                              <tr>
                                <td>*Password must start with an alphabetic character</td>
                              </tr>
                              <tr>
                                <td>*Password must be at least 7 character(s) long</td>     
                              </tr>
                              <tr>
                                <td>*Password must contain at least 1 special character(s)</td>
                              </tr>
                              <tr>
                                <td>*Password must contain at least 1 uppercase letter(s)</td>      
                              </tr>
                              <tr>
                                <td>*Password must not match or contain First Name</td>     
                              </tr>
                              <tr>
                                <td>*Password must not match or contain Last Name</td>
                              </tr>
                              <tr>
                                <td>*Password must not match or contain User ID</td>        
                              </tr>
                            </table>
                            <div class="col-sm-12 text-align-right form-footer">

                              <button type="submit" value="Save"  name="submit" onclick="return validateForm()" class="btn btn-primary">Continue</button>
                  <button type="submit" value="Cancel" onclick="return Cancel()" class="btn btn-default right-margin-7">Cancel</button>
                            </div>
                          </div>
                        </form>
                        <!--login form ends here-->
                    </div>                  
                </div>
            </div>                              
</div><!-- Main Content Ends -->

Answer 1

check with this below code and it may help you to solve the issue...

.pd0{
  padding : 3px;
  margin : 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div role="main" class="reset-passwd loginscreen">
  <!-- Main Content Starts -->
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 reset-content">
        <h1>Reset Password</h1>
        <!--login form start here-->

        <p>Please enter the information below to complete your password reset.</p>
        <%
    // Retrieve the error code returned by the servlet and display as the message
    String errorCode = null;
    errorCode= (String) request.getAttribute("ErrorCode");


    if (errorCode !=null && !errorCode.equals("")) {
    errorCode = errorCode.substring(12,errorCode.length());
    errorCode = errorCode.substring(0,errorCode.length()-1);    
 //errorCode = errorCode.replace(".","\\n");
 %> 
</br>
<p align="left"><font color="red" size="3px">The required password rules were not met. Please see the guidelines below.<% //out.println(errorCode); %></font></p>
<% }%> 
         <form class="form-horizontal" role="form" name="frmPwdReset" id=login method="POST" action='PasswordReset'>
          <div class="col-sm-6">
            <div class="form-group">
              <label for="newPasswd">New Password</label>
              <input type="password" class="form-control real_pass" placeholder="New Password" name="pwd" id="pwd" size="50"/>
              <input type="text" class="form-control fake_pass"  id="" value="New Password" style="display:none"/>
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Password</label>
              <input type="password" class="form-control real_pass1" placeholder="Confirm New Password" name="cnfpwd" id="cnfpwd" size="50"/>
              <input type="text" class="form-control fake_pass1"  id="" value="Confirm New Password" style="display:none"/>
            </div>
            <button type="submit" value="Save"  name="submit" onclick="return validateForm()" class="btn btn-primary">Continue</button>
            <button type="submit" value="Cancel" onclick="return Cancel()" class="btn btn-default right-margin-7">Cancel</button>
          </div>
          <div class="col-sm-5 alert alert-warning pd0">
            <p>*Password must start with an alphabetic character</p>
            <p>*Password must be at least 7 character(s) long</p>
            <p>*Password must contain at least 1 special character(s)</p>
            <p>*Password must contain at least 1 uppercase letter(s)</p>
            <p>*Password must not match or contain First Name</p>
            <p>*Password must not match or contain Last Name</p>
            <p>*Password must not match or contain User ID</p>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 2

I Hope this is what you are looking for! (Placing it side by side through col grid system).

And also I would recommend you to reduce the no. of lines, in the instructions for password. (Try to make it into 2 to 4 lines)

<div role="main" class="reset-passwd loginscreen">
 <!-- Main Content Starts -->
 <div class="container-fluid">
<div class="row">
  <div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 reset-content">
    <h1>Reset Password</h1>
    <!--login form start here-->

    <p>Please enter the information below to complete your password reset.</p>
    <%
    // Retrieve the error code returned by the servlet and display as the message
    String errorCode = null;
    errorCode= (String) request.getAttribute("ErrorCode");


    if (errorCode !=null && !errorCode.equals("")) {
    errorCode = errorCode.substring(12,errorCode.length());
    errorCode = errorCode.substring(0,errorCode.length()-1);
    //errorCode = errorCode.replace(".","\\n");
    %>
    </br>
    <p align="left"><font color="red" size="3px">The required password rules were not met. Please see the guidelines below.<% //out.println(errorCode); %></font></p>
    <% }%>
    <form class="form-horizontal" role="form" name="frmPwdReset" id=login method="POST" action='PasswordReset'>
      <div class="form-group">
        <div class="col-sm-4">
          <input type="password" class="form-control real_pass" placeholder="New Password" name="pwd" id="pwd" size="50"/>
          <input type="text" class="form-control fake_pass"  id="" value="New Password" style="display:none"/>
          <br>
          <input type="password" class="form-control real_pass1" placeholder="Confirm New Password" name="cnfpwd" id="cnfpwd" size="50"/>
          <input type="text" class="form-control fake_pass1"  id="" value="Confirm New Password" style="display:none"/>
        </div>
        <div class="col-sm-8">
          <table align="center">
            <tr>
              <td>*Password must start with an alphabetic character</td>
            </tr>
            <tr>
              <td>*Password must be at least 7 character(s) long</td>
            </tr>
            <tr>
              <td>*Password must contain at least 1 special character(s)</td>
            </tr>
            <tr>
              <td>*Password must contain at least 1 uppercase letter(s)</td>
            </tr>
            <tr>
              <td>*Password must not match or contain First Name</td>
            </tr>
            <tr>
              <td>*Password must not match or contain Last Name</td>
            </tr>
            <tr>
              <td>*Password must not match or contain User ID</td>
            </tr>
          </table>
        </div>
      </div>
      <hr/>
      <div class="form-group">
        <div class="col-sm-12 text-align-right form-footer">
          <button type="submit" value="Save"  name="submit" onclick="return validateForm()" class="btn btn-primary">Continue</button>
          <button type="submit" value="Cancel" onclick="return Cancel()" class="btn btn-default right-margin-7">Cancel</button>
        </div>
      </div>
    </form>
    <!--login form ends here-->
  </div>
</div>