title: How to make li one lined with others
body: <p>I want my text in every li has the same gap after span like so:</p>
  
  <pre><code>Street     Am Stadtpark 3
  Zip        Code 1030
  City       Vienna
  </code></pre>
  
  <p>I had my strong as absolute and left, but then main ul won't adjust its width with strong content(content goes out of borders).</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;html&gt;
  &lt;head&gt;
  &lt;title&gt;Page Title&lt;/title&gt;
  &lt;style&gt;
  ul{
   max-width: 200px;
      background: wheat;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;ul&gt;
      &lt;li&gt;&lt;span&gt;Street&lt;/span&gt; &lt;strong&gt;Am Stadtpark 3&lt;/strong&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span&gt;Zip Code &lt;/span&gt;&lt;strong&gt;1030&lt;/strong&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span&gt;City &lt;/span&gt;&lt;strong&gt;Vienna&lt;/strong&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>