title: Vertical align colon on list of text
body: <p>I'm doing a website project, with using a Materialize Framework.</p>
  
  <p>There is a line of text where i would like to align all of the colon vertically. this is the example of the text:</p>
  
  <pre><code>Project:Intimate House  
  Location : Pulau Putri, Puri - West Jakarta - Indonesia  
  Site Area : 160 sqm  
  Building Area : 210 sqm  
  Design Phase : 2016 
  Construction Period : April 2016 - July 2017
  </code></pre>
  
  <p>and this is the result of the vertically aligned colon that i want</p>
  
  <pre><code>Project                : Intimate House  
  Location               : Pulau Putri, Puri - West Jakarta - Indonesia  
  Site Area              : 160 sqm  
  Building Area          : 210 sqm  
  Design Phase           : 2016 
  Construction Period    : April 2016 - July 2017
  </code></pre>
  
  <p>Below is my code that i try to create(<a href="https://codepen.io/bukuchaga/pen/xJNdeq" rel="nofollow noreferrer">https://codepen.io/bukuchaga/pen/xJNdeq</a>)
  HTML: </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-html lang-html prettyprint-override"><code>                    &lt;h4&gt;&lt;b&gt;Intimate House&lt;/b&gt;&lt;br&gt;&lt;/h4&gt;
                      &lt;ul&gt;
                        &lt;li&gt;&lt;b&gt;Project:&lt;/b&gt;Intimate House&lt;/li&gt;
                        &lt;li&gt;&lt;b&gt;Location       :&lt;/b&gt; Pulau Putri, Puri - West Jakarta - Indonesia&lt;/li&gt;
                        &lt;li&gt;&lt;b&gt;Site Area      :&lt;/b&gt; 160 sqm&lt;/li&gt;
                        &lt;li&gt;&lt;b&gt;Building Area  :&lt;/b&gt; 210 sqm&lt;/li&gt;
                        &lt;li&gt;&lt;b&gt;Design Phase   :&lt;/b&gt; 2016&lt;/li&gt;
                        &lt;li&gt;&lt;b&gt;Construction Period :&lt;/b&gt; April 2016 -  July 2017&lt;/li&gt;
                      &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Based on my research before, i found a question that maybe similar to my question.(<a href="https://stackoverflow.com/questions/49739092/vertical-align-colon-with-numbers">Vertical align colon with numbers</a>)</p>
  
  <p><strong>The problem is</strong> after i tried to apply the answer, it's still not working on my code, rather it turns my line of text became out of place from how it should be and i have tried several others method and still not working.</p>
  
  <p>Thank you before.</p>