Donald Donald - 6 months ago 16
CSS Question

How to align the text within the div tag in a tabular form

I have the text followed by

the colon are not aligned. Can any one help me in aligining them.

<h4> Candidate Name :</h4>
<h4> Branch :</h4>
<h4> Position:</h4>
<h4> Reference Name :</h4>
<h4> Reference Phone # :</h4>
<h4> Reference Company :</h4>
<h4> Reference Job Title:</h4>
<h4> Relationship to Employee:</h4>

Current Output:

enter image description here

Requested Output:

enter image description here


This looks like tabular data so in this case you can use CSS table layout

div {
  display: table;
h4 {
  display: table-row;
h4 span {
  display: table-cell;
  <h4> Candidate Name  <span>: Random data</span></h4>
  <h4> Branch  <span>: Lorem</span></h4>
  <h4> Position <span>: Lorem ipsum dolor</span></h4>
  <h4> Reference Name  <span>: Random data</span></h4>
  <h4> Reference Phone #  <span>: Random data</span></h4>
  <h4> Reference Company  <span>: Random data</span></h4>
  <h4> Reference Job Title <span>: Random data</span></h4>
  <h4> Relationship to Employee <span>: Random data</span></h4>

Or you can change your HTML and just use Tables

  <tr> <td>Candidate Name </td> <td>: Random data</td></tr>
  <tr> <td>Branch</td>  <td>: Lorem</td></tr>
  <tr> <td>Position </td><td>: LOrem ipsum dolor</td></tr>
  <tr> <td>Reference Name </td> <td>: Random data</td></tr>
  <tr> <td>Reference Phone #</td>  <td>: Random data</td></tr>
  <tr> <td>Reference Company</td>  <td>: Random data</td></tr>
  <tr> <td>Reference Job Title</td> <td>: Random data</td></tr>
  <tr> <td>Relationship to Employee </td><td>: Random data</td></tr>