How to align two columns in HTML

Question

I am trying to format a personal info list in HTML. Something like:

.myself p{
	font-size: 130%;
  	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

<div class="myself">
<p>Name: First Last<br /><br />Age: 21<br /><br />Movie: xxxxx<br /><br /></p>
</div>

but when you run this code, it will look like

Name: First Last

    Age: 21

 Movie: xxxxx

which basically is centered every line. What I really want to achieve is like this:

 Name: First Last

  Age: 21

Movie: xxxxx

which align all the ":" colons. My idea is to make a table, then align each column separately, but I doubt that is the best way to do make this. Hope you guys can give me some better solutions. Thank you.

Answer 1

Try this piece of code.

This is called a grid layout, which is currently one of the most used types of layouts ones. The main idea about it is just splitting your page into boxes and stacking them together.

.myself .property{
  width:30%;
  display:inline-block;
  box-sizing:border-box;
  text-align:right;
  }

.myself .value{
  text-align:left;
  padding-left:10px;
  width:70%;
  display:inline-block;
  box-sizing:border-box;
  }

<div class="myself">
<div class="property">Name:</div><div class="value"> First Last</div> 
<div class="property">Age:</div><div class="value"> 21</div> 
<div class="property">Movie:</div><div class="value"> xxxxxx Last</div> 
  </div>