It's subtle, but important. The "regular" group on top -- with Date, Location and Result -- has a different line-height and font-size than the horizontal groups on the bottom, because horizontal and "regular" groups can be styled differently.
You probably know that you can get horizontal groups pretty easily:
<group layout="horizontal"> . . . data . . . </group>
This styling is particularly useful when showing groups that are in conflict with each other, or even when just displaying some kind of previous/next data pattern.
What’s cool about this is that you can have different styling applied to each kind of group. Want your previous/next data to have a different font-size than the “normal” data? Totally possible!
The only catch is that you might have to use !important on the horizontal-group tagged stuff, depending on what else you’ve done in your coding. So keep that in mind, even though the snippet below does not include !important. Oh, and the snipped below also assumes we're styling a particular theme, this time called “whatever”.
/* Normal value/label styling */
.pi-theme-whatever .pi-data-value,
.pi-theme-whatever .pi-data-label { styling }
/* Horizontal group value/label styling */
.pi-theme-whatever .pi-horizontal-group-item.pi-data-value,
.pi-theme-whatever .pi-horizontal-group-item.pi-data-label { styling }
/* Normal group header styling */
.pi-theme-whatever .pi-header { styling }
/* Horizontal group header styling */
.pi-theme-whatever .pi-horizontal-group .pi-header { styling }