How to make alignment for label text on left AND right to have same

I work on template using html and CSS . I face issue I can't do alignment label text on left and right to be same .

as example

submit Date and Employee id not start from same point on left so I need all text on left have same alignment .

also on right also text not start from same point as ??? ?????? and ??? ??????

so I need all text on right have same alignment .

full html and CSS what I try as below :





  
  





  
    
      ????? ????? ??????? 
 Resignation Submission Form
    
  
  
    
      
        To be filled by the Employee
      
      
        ??? ????? ?? ??????
      
    

    
      
        
          
            Emp. ID:
            -------------------

            :??? ??????

          

          
            Emp Name:
            -----------------------------------

            :??? ??????

          
        

        
          
            Dept./Branch:
            -------------------

            :?????/??????

          

          
            Designation:
            -----------------------------------

            :?????? ???????

          
        
        
          
            Submittion Date:
            -------------------

            :????? ????? ?????????

          

          
            Mobile No:
            -----------------------------------

            :??? ??????

          
        

        
          
            Last Working Date:
            -------------------

            :??? ??? ???

          

          
            Employee Signature:
            -----------------------------------

            :????? ??????

          
        

        
          
            Reason:
            -------------------



          

          

            -------------------
            :??? ?????????

          
        
        
          

            -------------------------------------------------------



          

          

            -------------------------------------------------------------


          
        
        
          
            
              Important Note : 
            
            
              :?????? ????
            
          
          
            Employee should work 14 days, 30 Days or 90 Days’ Notice 
period as per Labor contract from the date of submission of 
resignation. If the employee fails to do so, salary for 
unserved Notice period will be deducted from the final 
settlement (as per Labor Law). Employees are not eligible 
for any leave during the Notice period.
*Ensure to complete checklist for Separation with Branch/ 
Dept./Div. Dir. on your last Day.
            
            ??? ??? ?????? ????? ????? ????? ???? ????? ????? 14 ??? ?? 30 ???? ?? 90 ???? ??? ??? ????? ?? ????? ????? ????????? ?? ???? ??? ???????? ????? ??????? ??????? ??? ????? ?? ??????? ????? ?????? ??? ????? ????? ????? ?????? ?????? ??? ?? ????? ???? ???? ??????? ???? ?????? ?? ????? ??????? ?????? ?????? ?????? ?? ?????/???? ???????/ ?????? ?? ??? ??? ??? ?? 
          



        
        
          
            
              Line Manager Remarks: 
            
            
              :??????? ?????? ???????
            
          
          
            
            
            
          
          
            
              Signature
              
              :??????? 
              Date :
               ----/-----/---- 
              : ???????
            

          

          
            
              
                Dept./ Div. Dir. or Dept. Mgr. Remarks : 
              
              
                :??????? ???? ???????/???? ??????
              
            
            
              
              
              
            
            
              
                Signature
                
                :??????? 
                Date :
                 ----/-----/---- 
                : ???????
              

            
            
              
                
                   HR & Emiratisation Director Remarks : 
                
                
                  :??????? ???? ????? ??????? ??????? ????????
                
              
              
                
                
                
              
              
                
                  Signature
                  
                  :??????? 
                  Date :
                   ----/-----/---- 
                  : ???????
                

              
              
                
                  
                     CEO Remarks(if applicable)  : 
                  
                  
                    :??????? ?????? ???????? ??? ???
                  
                
                
                  
                  
                  
                
                
                  
                    Signature
                    
                    :??????? 
                    Date :
                     ----/-----/---- 
                    : ???????

expected result as below :

It looks like you want to align the text on the left and right sides of your form so that they start from the same point. To achieve this, you can use CSS to adjust the widths of your labels and ensure consistent padding. Here's an updated version of your HTML and CSS with the necessary changes:

In this updated code, I've made the following changes:

Added margin-bottom to the .employee-info class to separate each employee info section vertically.
Modified the .id_container and .name_container classes to have flex: 1, ensuring both sides are equal width within each employee info section.
Adjusted the width, text-align, and margin properties for the labels within these containers to ensure left alignment and consistent width.

These changes should help align the text on both the left and right sides of your form. You can adjust the width values as needed to achieve the desired alignment.

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Prasad Raveendran3y ago
It looks like you want to align the text on the left and right sides of your form so that they start from the same point. To achieve this, you can use CSS to adjust the widths of your labels and ensure consistent padding. Here's an updated version of your HTML and CSS with the necessary changes:
```
  
  
  


  
```
In this updated code, I've made the following changes:
1. Added margin-bottom to the .employee-info class to separate each employee info section vertically.
2. Modified the .id_container and .name_container classes to have flex: 1, ensuring both sides are equal width within each employee info section.
3. Adjusted the width, text-align, and margin properties for the labels within these containers to ensure left alignment and consistent width.
These changes should help align the text on both the left and right sides of your form. You can adjust the width values as needed to achieve the desired alignment.

How to make alignment for label text on left AND right to have same

????? ????? ??????? Resignation Submission Form

????? ????? ???????
Resignation Submission Form