How to align the top of multiple columns of li

clipboard.png

< ul class= "pd10" style= "border-right: 1px solid-sharpddd;" >

<li>
  <span>:</span>{{li.carNo}}</li>
<li>
  <span>:</span>{{li.reason}}</li>
<li v-if="li.fromOrganId == li.serviceOrganId || carReason == "YES"">
  <span>:</span>{{li.num}}</li>
<li>
  <span>:</span>{{li.startTime |slice19}}
</li>
<li>
  <span>:</span>{{li.endTime |slice19}}
</li>
<li>
  <span>:</span>{{li.times}}
</li>
<li>
  <span>:</span>{{li.startAddress}}
</li>
<li>
  <span>:</span>{{li.endAddress}}
</li>
<li style="font-weight:bold;">
  <span>:</span>{{li.totalMile}}
</li>


as shown in the figure, the li loop is used, and the li is set to in _ line _ block! Fixed 30% width, when one column has too many broken lines, how can the li of other columns be aligned at the top so that they are consistent?
ask God for help

Css
Mar.23,2021

if you use inline-block, the default is baseline, so you want to set li's vertical-align:top


with flex you should be able to


inline-block is aligned at the bottom, float: left is aligned at the top.
or use flex layout align-items: flex-start


to directly add a vertical-align:top to the outer 30% wide li. Also, you need to add a font-size:0; to the element ul because there will be space between elements with the inline-block attribute. You will know the details under Baidu


you can also use table.

Menu