title: Position all elements after a delimeter an equal distance
body: <p>I am in the midst of learning CSS and positioning techniques.</p>
  
  <p>I tried googling, but it's sort of a specific case and didn't know how to ask short of typing out the result that I want.</p>
  
  <p>Here is my HTML</p>
  
  <pre><code>&lt;h2&gt; "{{title}}" &lt;/h2&gt;
  &lt;h4&gt;&lt;b&gt; Path: &lt;/b&gt; "{{path_name}}" &lt;/h4&gt;
  &lt;h4&gt;&lt;b&gt; Last Updated: &lt;/b&gt; "{{last_updated}}" &lt;/h4&gt; 
  &lt;h4&gt;&lt;b&gt; Parent: &lt;/b&gt; "{{parent}}" &lt;/h4&gt;
  </code></pre>
  
  <p>In case anyone is wondering, the {{}} is because those are variables bound to the scope with angular.</p>
  
  <p>Anyway, this is what turns up.</p>
  
  <pre><code>HELLO
  Path: /abc/def/ghi
  Last Updated: Wednesday
  Parent: /abc/def
  </code></pre>
  
  <p>Because the names of the fields are differing lengths, the text for each field after the colon is obviously going to be vary where it starts. What I want is something like this.</p>
  
  <pre><code>HELLO
  Path:              /abc/def/ghi
  Last Updated:      Wednesday
  Parent:            /abc/def
  </code></pre>
  
  <p>Would anyone know how to align things in such a way? I don't know enough about CSS to properly ask a question via google, without being able to visually represent what I want to do.</p>