title: Divide Array list into 3 column but it not aligned properly in HTML CSS
body: <p>Array of Object, I have to divide a list into 3 rows that contain Line, which separate two column, so, I have write the following code:-</p>
  <pre><code>HTML
  let Arr = [
    { num: 'jkjjk' },
    { num: 'jkjjk' },
    { num: 'jkjjkkj dshdjsh jhsjhsdj' },
    { num: 'jkjjkkj dshdjsh jhsjhsdj' },
    { num: 'jkjjkkj  ' },
    { num: 'jkjjkkj  jhsjhsdj' }
  ];
  
  {Arr.map((element) =&gt; (
    &lt;ul className={divide}&gt;
     &lt;li&gt;{element.num}&lt;/li&gt;
    &lt;/ul&gt;
  )}
  
  &lt;div&gt;
  
  CSS
  
  .divide {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    column-gap: 40px;
    column-rule: 1px solid rgba(0, 0, 0, 0);
  }
  
  </code></pre>
  <p>It's works for me but the list of element are not aligned properly, <strong>In a row, first column element are on top &amp; the rest of the columns element are on middle or bottom of the row,
  so, I want to align all the Element in the Column on the top,</strong></p>
  <p>Note:- Alignment mismatch may be due to element String have too much length, thats why Its create problem,</p>
  <p>Sugget me how to solve this</p>