Need help with dividing a list into 3 rows with Lines separating two columns. This is the code I have written:
HTML
let Arr = [
{ num: 'jkjjk' },
{ num: 'jkjjk' },
{ num: 'jkjjkkj dshdjsh jhsjhsdj' },
{ num: 'jkjjkkj dshdjsh jhsjhsdj' },
{ num: 'jkjjkkj ' },
{ num: 'jkjjkkj jhsjhsdj' }
];
{Arr.map((element) => (
<ul className={divide}>
<li>{element.num}</li>
</ul>
)}
<div>
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);
}
Although this code works, the alignment of elements in the columns is off. The first column element is on top while the rest are in the middle or bottom of the row. I want to align all elements at the top of each column.
Note: The alignment issue may be due to the length of the string in the elements causing the problem.
Please suggest how I can solve this issue.