In my current project, I am using CSS columns to establish a two-column layout for an unordered list. Here is the code snippet:
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;
}
Although this setup functions correctly, it can result in misalignment of bullet points in the second column if any content in the `li` elements wraps onto multiple lines...
For instance:
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 arrangement appears disorderly.
I would prefer the display to be as follows:
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 there a simple way to achieve this layout with the existing CSS columns configuration, or should I consider implementing it differently?