How to adjust the styling on the Lightning record view form?

Question

I am trying to create custom Highlights panel using LWC, to show in the flow. Able to fetch the details, but the label names are showing in vertical form instead of row.(shown below)

I want to show the label names in the first row similar to the highlights panel

can anyone suggest some css to adjust the styling?

LWC component: Html:

<template>
<div class="slds-page-header slds-page-header_record-home">
        <div class="slds-page-header__row">
            <div class="slds-page-header__col-title">
                <div class="slds-media">
                    <div class="slds-media__figure">
                        <lightning-icon icon-name="standard:opportunity" size="medium" alternative-text="Opportunity"></lightning-icon>
                    </div>
                    <div class="slds-media__body" style="line-height: 13px;">
                        <span>Opportunity</span>
                        <span class="slds-page-header__title slds-truncate" title={oppName}>{nameField}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="slds-page-header__row slds-page-header__row_gutters">
            <div class="slds-page-header__col-details">
                <lightning-record-view-form
                        record-id={opportunityId}
                        object-api-name="Opportunity">
 
                    <ul class="slds-page-header__detail-row" style="padding-left: 12px;">
                        <template for:each={fieldList} for:item="field" for:index="index">
                            <li key={field} class="slds-page-header__detail-block">
                                <lightning-output-field field-name={field}></lightning-output-field>
                            </li>
                        </template>
                    </ul>
                </lightning-record-view-form>
            </div>
        </div>
    </div>
</template>

js:

import { LightningElement,api } from 'lwc';
//import {ShowToastEvent} from "lightning/platformShowToastEvent";
import fetchFields from '@salesforce/apex/HighLightsController.fetchFields';
export default class HighLightsComponent extends LightningElement {
    @api oppName;
    @api recordId;
    @api objectApiName;
    @api fieldSet;
        nameField = '';
    fieldList = [];

    connectedCallback() {
        this.displaynotification();
                 fetchFields({
            recordId : this.recordId,
            objectName : "Opportunity",
            fieldSetName : "NewOpportunityHeaderFields"
        }).then(result => {
            if(result) {
                console.log(result);
                if(result.message != undefined) {
                    this.showToast('Error', 'error', result.message);
                    return;
                }
                this.nameField = result.nameField;
                this.fieldList = result.fieldsAPI;
            }
        }).catch(error => {
            if(error && error.body && error.body.message) {
                this.showToast('Error', 'error', error.body.message);
            }
        });
    }
}

Answer 1

You are not using slds-grid. You can try using slds-grid as your parent div and slds-col as your child div and give spacing of slds-size-1-of-4 to slds-size-4-of-4 as per the number of fields you want to display under each column.

Also check the padding for the Divs that you are using, use the SLDS recommended padding , something like slds-var-p-around-small. This would allow equal spacing between the fields in a row.