Although this question has been raised multiple times, I have not been able to find a solution tailored to my specific situation.
Here is an example of what I am dealing with: DEMO
Essentially, it involves a list of rows:
<ul>
<li>
<label>
<span>element1</span>
<span>element2</span>
<span>element3</span>
<span>element4</span>
</label>
</li>
<li>
<label>
<span>element1</span>
<span>element2</span>
<span>element3</span>
<span>element4</span>
</label>
</li>
</ul>
The span elements are all set as inline-blocks, and the label has a style of text-align: justify.
Everything seems to be functioning correctly except for one issue - the vertical alignment. All items appear to be aligned at the top, which is not the desired outcome. Initially, I suspected the common inline-block problem causing an extra space, but even after attempting solutions like setting font-size to 0 or eliminating white space, the alignment remains unchanged.