title: How to align two columns in HTML
body: <p>I am trying to format a personal info list in HTML.
  Something like:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.myself p{
   font-size: 130%;
     margin-left: auto;
   margin-right: auto;
   text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="myself"&gt;
  &lt;p&gt;Name: First Last&lt;br /&gt;&lt;br /&gt;Age: 21&lt;br /&gt;&lt;br /&gt;Movie: xxxxx&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>but when you run this code, it will look like </p>
  
  <pre><code>Name: First Last
  
      Age: 21
  
   Movie: xxxxx
  </code></pre>
  
  <p>which basically is centered every line. What I really want to achieve is like this:</p>
  
  <pre><code> Name: First Last
  
    Age: 21
  
  Movie: xxxxx
  </code></pre>
  
  <p>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.</p>