title: Two un-ordered list in parallel: HTML/CSS
body: <p>I want to get like this.</p>
  
  <p><img src="https://i.stack.imgur.com/9gIkS.png" alt="enter image description here"></p>
  
  <p>To achieve this, I have done as following, but it's not working:</p>
  
  <pre><code>&lt;div class="col-lg-3"&gt;
      &lt;ul&gt;
          &lt;li&gt;java&lt;/li&gt;
          &lt;li&gt;android&lt;/li&gt;
          &lt;li&gt;python&lt;/li&gt;
          &lt;li&gt;HTML/CSS&lt;/li&gt;
          &lt;li&gt;Git&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="col-lg-3"&gt;
      &lt;ul&gt;
          &lt;li&gt;-----------&lt;/li&gt;
          &lt;li&gt;-----------&lt;/li&gt;
          &lt;li&gt;--&lt;/li&gt;
          &lt;li&gt;---------------&lt;/li&gt;
          &lt;li&gt;----&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How to achieve the first bar next to java, second bar next to android and so on?</p>
  
  <p>Thanks in advance!</p>