UL CSS Columns - Line up columns height to match if multiple lines - html

Question

I currently am using CSS columns, to create a 2 column layout for an unordered list. Here's the code:
HTML
<div class="meta-data">
<ul>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Case Study</strong> Case Study Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Sector</strong> Sector Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Client</strong> Client Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Value</strong> Value Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Programme Duration</strong> Programme Duration Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Current Status</strong> Current Status Here </li>
</ul>
</div>
CSS
.meta-data ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
This works fine. However, if any of the li content wrap onto 2 lines or more, it throws off the 2nd column bullet points so they're not all lined up horizontally...
For example:
Case Studies: This goes onto Value: Value Here
two lines
Programme Duration: Duration here.
Sector: Sector here.
Current Status: Current Status here.
Client: Client Here
This looks messy.
I'd rather it showed as:
Case Studies: This goes onto Value: Value Here
two lines
Sector: Sector here. Programme Duration: Duration here.
Client: Client Here Current Status: Current Status here.
Is this easily possible with the CSS columns setup, or do I need to recode this a diff way?

Answer 1

I don't see a way to do this using column property, you can use css grid
.meta-data ul {
display:grid;
grid-template-columns: 300px 300px;
grid-column-gap:10px;
}
<div class="meta-data">
<ul>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Case Study</strong> Case Study Here Case Study HereCase Study</li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Sector</strong> Sector Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Client</strong> Client Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Value</strong> Value Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Programme Duration</strong> Programme Duration Here </li>
<li><i class="fa fa-chevron-right fa-xs"></i><strong>Current Status</strong> Current Status Here </li>
</ul>
</div>