Membuat titik dua sejajar di php

Hallo selamat pagi teman2, gimana buat titik dua nya sejajar ya? tanpa mengatur nya satu persatu?
trimksi..

<p style="text-align:justify">Adapun data-data mengenai diri saya sbb :</p>
                    <br>
                      <td> Nama Lengkap</td> 
                      <span style="padding-left:500px;"><td> : </td></span>
                      <td class="borderData" style="width:50%;text-align:left;vertical-align:top;"><?=$data['inp_nama']?></td> <br><br>
                      <td> Warga Negara</i></td> 
                      <span style="padding-left:500px;"><td> : </td></span>
                      <td class="borderData" style="width:50%;text-align:left;vertical-align:top;"><?=$data['inp_warga_negara']?></td></br></br>
                      <td> Jenis Kelamin</i></td> 
                      <span style="padding-left:500px;"><td> : </td></span>
                      <td class="borderData" style="width:50%;text-align:left;vertical-align:top;"><?=$data['inp_jk']?></td></br></br>

image.png

Untuk penampilan, semuanya berada di CSS.
Ada banyak cara mengatur text dan titik dua jadi sejajar.

1. Atur properti "width" dari label yang di seblah kiri. Bikin semua widthnya sama di CSS, untuk lable yang di sebelah kiri

2. Bungkus semua properti label di satu div yang sama, Titik dua div berikutnya, dan isi dari label di div berikutnya lagi. Tmapilkan dalam bentuk flex

Coba seperti ini :

<style>
	table {
		width: 100%;
	}
  /* Mengatur width kolom pertama */
	table tr td:first-child {
		width: 120px;
	}
  /* Mengatur width kolom ke-2 */
	table tr td:nth-child (2) {
		width: 10px;
	}
</style>
<table>
	<tr>
		<td>Name</td>
		<td>:</td>
		<td>John Doe</td>
	</tr>
	<tr>
		<td>Dob</td>
		<td>:</td>
		<td>1999-02-22</td>
	</tr>
	<tr>
		<td>Country</td>
		<td>:</td>
		<td>United State of America</td>
	</tr>
	<tr>
		<td>Phone</td>
		<td>:</td>
		<td>+1 291892819</td>
	</tr>
</table>

Hasilnya bisa cek disini https://codepen.io/ahanafi/pen/BaVVbJG