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

HTML & CSS
1

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 :slight_smile:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<style>
  .label-container {
    display: flex;
    justify-content: space-between;
  }
  
  .left-label {
    text-align: left;
  }
  
  .right-label {
    text-align: right;
  }
  
  .form-header {
    color: black;
    background-color: gray;
    text-align: center;
    width: 50%;
    padding: 20px;
    margin: 10px auto;
  }
  
  .form-header h2 {
    margin: 0;
    font-weight: 500;
  }
  
  .form-container {
    border: 2px dashed gray;
    border-bottom: none;
    max-width: 100%;
    padding-bottom: 10px;
    margin: 0 auto;
  }
  
  .form-info {
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 5px;
    background-color: gray;
  }
  
  .employee-info {
    display: flex;
    justify-content: space-around;
  }
  
  .id_container {
    display: flex;
    gap: 10px;
    margin-left: 10px;
  }
  
  .name_container {
    display: flex;
    gap: 10px;
  }
  
  .table-border-end {
    height: 50px;
    border-top: 2px dashed gray;
    border-bottom: 2px dashed gray;
  }
  
  label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
  }
  
  input[type="text"] {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
  }
  
  h1 {
    text-align: center;
  }
  
  form {
    margin-top: 20px;
  }
  
  label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
  }
  
  input[type="text"],
  textarea,
  input[type="date"] {
    width: 100%;
    padding: 5px;
  }
  
  input[type="submit"] {
    background-color: #4caf50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 20px;
  }
  
  input[type="submit"]:hover {
    background-color: #45a049;
  }
  
  .line-container {
    margin-top: 30px;
  }
  
  .line {
    border: none;
    border-top: 1px solid black;
    margin: 0;
  }
  
  .solid-table {
    border-collapse: collapse;
    width: 100%;
  }
  
  .solid-table th,
  .solid-table td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
</style>

<body>
  <div class="form-header">
    <h2>
      نموذج تسجيل استقاله <br /> Resignation Submission Form
    </h2>
  </div>
  <div class="form-container">
    <div class="form-info">
      <div class="form-section">
        <label for="emp-input">To be filled by the Employee</label>
      </div>
      <div class="form-section">
        <p class="fill-by-employee">يتم ملئها من الموظف</p>
      </div>
    </div>

    <div class="form">
      <form>
        <div class="employee-info" style="margin-left:10px;">
          <div class="id_container">
            <label for="emp-id">Emp. ID:</label>
            <label for="emp-id">-------------------</label>

            <label for="dept-branch">:رقم الموظف</label>

          </div>

          <div class="name_container">
            <label for="submission-date">Emp Name:</label>
            <label for="submission-date">-----------------------------------</label>

            <label for="emp-sign">:اسم الموظف</label>

          </div>
        </div>

        <div class="employee-info" style="margin-left:30px;">
          <div class="id_container">
            <label for="emp-id">Dept./Branch:</label>
            <label for="emp-id">-------------------</label>

            <label for="dept-branch">:الفرع/لاداره</label>

          </div>

          <div class="name_container">
            <label for="submission-date">Designation:</label>
            <label for="submission-date">-----------------------------------</label>

            <label for="emp-sign">:المسمى الوظيفى</label>

          </div>
        </div>
        <div class="employee-info">
          <div class="id_container">
            <label for="emp-id">Submittion Date:</label>
            <label for="emp-id">-------------------</label>

            <label for="dept-branch">:تاريخ تقديم الاستقاله</label>

          </div>

          <div class="name_container">
            <label for="submission-date">Mobile No:</label>
            <label for="submission-date">-----------------------------------</label>

            <label for="emp-sign">:رقم الهاتف</label>

          </div>
        </div>

        <div class="employee-info">
          <div class="id_container">
            <label for="emp-id">Last Working Date:</label>
            <label for="emp-id">-------------------</label>

            <label for="dept-branch">:اخر يوم عمل</label>

          </div>

          <div class="name_container">
            <label for="submission-date">Employee Signature:</label>
            <label for="submission-date">-----------------------------------</label>

            <label for="emp-sign">:توقيع الموظف</label>

          </div>
        </div>

        <div class="employee-info">
          <div class="id_container">
            <label for="emp-id">Reason:</label>
            <label for="emp-id">-------------------</label>



          </div>

          <div class="name_container">

            <label for="emp-id">-------------------</label>
            <label for="emp-sign">:سبب الاستقاله</label>

          </div>
        </div>
        <div class="employee-info">
          <div class="id_container">

            <label for="emp-id">-------------------------------------------------------</label>



          </div>

          <div class="name_container">

            <label for="emp-id">-------------------------------------------------------------</label>


          </div>
        </div>
        
      </form>
      </div>
      <div class="table-border-end"></div>
      </div>

</body>

</html>

s1
s11866×599 24.6 KB

2

I’d simplify it a bit and do each side as one block and then put one block on each side rather than alternate items.

e.g.


(View on codepen for full size as I made small screen go to one column)

(Note that I just copied one row multiple times due to lack of time so the ids and names are invalid).

If you needed alternate items then you’d probably need css grid to do it and would be a bit more complex. I just used flex but with a nested old fashioned display:table-cell to align the items.

2 Likes