Multiple columns - HTML

Question

I have three rows in my html document. The rows look like these:

Name: John Smith
DOB: 01/01/1980
Country: Germany

I would like to divide each row into two columns, so the output of my document look like this:

Name     : John Smith
DOB      : 01/01/1980
Country  : Germany

i.e. the name,dob, and country identifiers in column one of each row and the ":" and result in the column 2 of each row.

This is my code so far:

   <div>
        <h2>
        <br/>Name: KEY_NAME
        <br/>DOB: KEY_DOB
        <br/>Country: KEY_COUNTRY
        </h2>
    </div>

Answer 1

You can do like this. Hope it helps. Thanks

div p:first-child{
  
   display: inline-block;
    float: left;
    margin: 0 25px;
    width: 50px;
  }

span{
    float: left;
    width: 25px;
}

<div><p>Name </p> <span>:</span> <p>Keyname</p></div>
<div><p>DOB </p> <span>:</span> <p>04/08/93</p></div>
<div><p>Coutry </p> <span>:</span> <p>India</p></div>