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 :
<!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>
<div class="form-container">
<div class="form-info">
<div class="form-section">
<label for="emp-input">Important Note : </label>
</div>
<div class="form-section">
<p class="fill-by-employee">:ملاحظه هامه</p>
</div>
</div>
<div class="label-container">
<label class="left-label" style="width:45%">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.</label>
<label style="width:5%"></label>
<label class="right-label" style="width:45%">يجب على الموظف اعطاء الطرف الاخر فتره انذار محدده 14 يوم هو 30 يوما او 90 يوما حسب عقد العمل من تاريخ تقديم الاستقاله فى حاله عدم الالتزام بفتره الانذار المحدده يتم خصمها من مستحقات نهايه الخدمه حسب قانون العمل لايحق للموظف الحصول على اى اجازه خلال فتره الانذار يرجى التاكد من قائمه التدقيق الخاصه بنهايه الخدمه مع الفرع/مدير الاداره/ القطاع فى اخر يوم عمل لك </label>
</div>
</div>
<div class="form-container">
<div class="form-info">
<div class="form-section">
<label for="emp-input">Line Manager Remarks: </label>
</div>
<div class="form-section">
<p class="fill-by-employee">:ملاحظات المدير المباشر</p>
</div>
</div>
<div class="line-container">
<hr class="line">
<hr class="line" style="margin-top: 30px;">
<hr class="line">
</div>
<table class="solid-table" style="margin-top: 30px;">
<tr>
<th>Signature</th>
<th style="width: 20% ;"></th>
<th>:التوقيع </th>
<th>Date :</th>
<th> ----/-----/---- </th>
<th>: التاريخ</th>
</tr>
</table>
<div class="form-container">
<div class="form-info">
<div class="form-section">
<label for="emp-input">Dept./ Div. Dir. or Dept. Mgr. Remarks : </label>
</div>
<div class="form-section">
<p class="fill-by-employee">:ملاحظات مدير الاداره/مدير القطاع</p>
</div>
</div>
<div class="line-container">
<hr class="line">
<hr class="line" style="margin-top: 30px;">
<hr class="line">
</div>
<table class="solid-table" style="margin-top: 30px;">
<tr>
<th>Signature</th>
<th style="width: 20% ;"></th>
<th>:التوقيع </th>
<th>Date :</th>
<th> ----/-----/---- </th>
<th>: التاريخ</th>
</tr>
</table>
<div class="form-container">
<div class="form-info">
<div class="form-section">
<label for="emp-input"> HR & Emiratisation Director Remarks : </label>
</div>
<div class="form-section">
<p class="fill-by-employee">:ملاحظات مدير اداره الموارد البشريه والتوطين</p>
</div>
</div>
<div class="line-container">
<hr class="line">
<hr class="line" style="margin-top: 30px;">
<hr class="line">
</div>
<table class="solid-table" style="margin-top: 30px;">
<tr>
<th>Signature</th>
<th style="width: 20% ;"></th>
<th>:التوقيع </th>
<th>Date :</th>
<th> ----/-----/---- </th>
<th>: التاريخ</th>
</tr>
</table>
<div class="form-container">
<div class="form-info">
<div class="form-section">
<label for="emp-input"> CEO Remarks(if applicable) : </label>
</div>
<div class="form-section">
<p class="fill-by-employee">:ملاحظات الرئيس التنفيذى اذا طلب</p>
</div>
</div>
<div class="line-container">
<hr class="line">
<hr class="line" style="margin-top: 30px;">
<hr class="line">
</div>
<table class="solid-table" style="margin-top: 30px;">
<tr>
<th>Signature</th>
<th style="width: 20% ;"></th>
<th>:التوقيع </th>
<th>Date :</th>
<th> ----/-----/---- </th>
<th>: التاريخ</th>
</tr>
</table>
</form>
</div>
<div class="table-border-end"></div>
</div>
</body>
</html>
expected result as below :
