<h2>Horizontal group variant</h2>
<p>The horizontal group displays fields inline but responsively switches to vertical on mobile.</p>

<h3>Horizontal group of stacked fields</h3>
<div class="health-field-group  health-field-group--horizontal">
    <div class="health-field">
        <div class="health-field__label">Date published:</div>
        <div class="health-field__item">23 May 2024</div>
    </div>
    <div class="health-field">
        <div class="health-field__label">Duration:</div>
        <div class="health-field__item">30 minutes</div>
    </div>
    <div class="health-field">
        <div class="health-field__label">Type:</div>
        <div class="health-field__item">News article</div>
    </div>
</div>

<hr>

<h3>Horizontal group of stacked (label with icon) fields</h3>
<div class="health-field-group  health-field-group--horizontal">
    <div class="health-field health-field--icon health-field--icon-date">
        <div class="health-field__label">Date published:</div>
        <div class="health-field__item">23 May 2024</div>
    </div>
    <div class="health-field health-field--icon health-field--icon-duration">
        <div class="health-field__label">Duration:</div>
        <div class="health-field__item">30 minutes</div>
    </div>
    <div class="health-field health-field--icon health-field--icon-type">
        <div class="health-field__label">Type:</div>
        <div class="health-field__item">News article</div>
    </div>
</div>

<hr>

<h3>Horizontal group of inline fields</h3>
<div class="health-field-group  health-field-group--horizontal">
    <div class="health-field health-field--inline">
        <div class="health-field__label">Date published:</div>
        <div class="health-field__item">23 May 2024</div>
    </div>
    <div class="health-field health-field--inline">
        <div class="health-field__label">Duration:</div>
        <div class="health-field__item">30 minutes</div>
    </div>
    <div class="health-field health-field--inline">
        <div class="health-field__label">Type:</div>
        <div class="health-field__item">News article</div>
    </div>
</div>

<hr>

<h3>Horizontal group of inline (label with icon) fields</h3>
<div class="health-field-group  health-field-group--horizontal">
    <div class="health-field health-field--inline health-field--icon health-field--icon-date">
        <div class="health-field__label">Date published:</div>
        <div class="health-field__item">23 May 2024</div>
    </div>
    <div class="health-field health-field--inline health-field--icon health-field--icon-duration">
        <div class="health-field__label">Duration:</div>
        <div class="health-field__item">30 minutes</div>
    </div>
    <div class="health-field health-field--inline health-field--icon health-field--icon-type">
        <div class="health-field__label">Type:</div>
        <div class="health-field__item">News article</div>
    </div>
</div>

<hr>

<h3>Horizontal group of icon-only fields</h3>
<div class="health-field-group  health-field-group--horizontal">
    <div class="health-field health-field--icon-only health-field--icon-date">
        <div class="health-field__label">Date published:</div>
        <div class="health-field__item">23 May 2024</div>
    </div>
    <div class="health-field health-field--icon-only health-field--icon-duration">
        <div class="health-field__label">Duration:</div>
        <div class="health-field__item">30 minutes</div>
    </div>
    <div class="health-field health-field--icon-only health-field--icon-type">
        <div class="health-field__label">Type:</div>
        <div class="health-field__item">News article</div>
    </div>
</div>