Use 2 different lightning:recordViewForm inside one SLDS Page Header

Question

I want to show data from 2 different objects inside an SLDS Page Header

For the page header I use <ul class="slds-page-header__detail-row">

For the data - I use lightning:recordViewForm

If I get data from one object - all looks and works well :

<lightning:recordViewForm recordId="a1IW0000001CGSbMAO" objectApiName="Budget__c">
    <ul class="slds-page-header__detail-row">
        <li class="slds-page-header__detail-block">
            <lightning:outputField fieldName="Id" />
        </li>
        <li class="slds-page-header__detail-block">
            <lightning:outputField fieldName="Name" />
        </li>
    </ul>
</lightning:recordViewForm>

When I want to get data from 2 different objects, I tried many different things and could not find a way to show it OK:

First try

I tried to put the <ul> element outside the lightning:recordViewForm, and then all the css gets messed up:

<ul class="slds-page-header__detail-row">
    <lightning:recordViewForm recordId="a1IW0000001CGSbMAO" objectApiName="Budget__c">
        <li class="slds-page-header__detail-block">
            <lightning:outputField fieldName="Id" />
        </li>
        <li class="slds-page-header__detail-block">
            <lightning:outputField fieldName="Name" />
        </li>
    </lightning:recordViewForm>
    <lightning:recordViewForm recordId="a1HW0000002vh5xMAA" objectApiName="Payment__c">
        <li class="slds-page-header__detail-block">
            <lightning:outputField fieldName="Id" />
        </li>
        <li class="slds-page-header__detail-block">
            <lightning:outputField fieldName="Name" />
        </li>
    </lightning:recordViewForm>
</ul>

Second try

I tried to put 2 <ul> elements and it looks nice but it creates 2 lines:

<lightning:recordViewForm recordId="a1IW0000001CGSbMAO" objectApiName="Budget__c">
    <ul class="slds-page-header__detail-row">
        <li class="slds-page-header__detail-block">
            <lightning:outputField fieldName="Id" />
        </li>
        <li class="slds-page-header__detail-block">
            <lightning:outputField fieldName="Name" />
        </li>
    </ul>
</lightning:recordViewForm>
<lightning:recordViewForm recordId="a1HW0000002vh5xMAA" objectApiName="Payment__c">
    <ul class="slds-page-header__detail-row">
        <li class="slds-page-header__detail-block">
            <lightning:outputField fieldName="Id" />
        </li>
        <li class="slds-page-header__detail-block">
            <lightning:outputField fieldName="Name" />
        </li>
    </ul>
</lightning:recordViewForm>

Third try

I have tried to put these 2 <ul> in slds-grid so it would display in one line but it does not space up the fields:

<div class="slds-grid">
    <div class="slds-col">
        <lightning:recordViewForm recordId="a1IW0000001CGSbMAO" objectApiName="Budget__c">
            <ul class="slds-page-header__detail-row">
                <li class="slds-page-header__detail-block">
                    <lightning:outputField fieldName="Id" />
                </li>
                <li class="slds-page-header__detail-block">
                    <lightning:outputField fieldName="Name" />
                </li>
                <li class="slds-page-header__detail-block">
                    <lightning:outputField fieldName="Description__c" />
                </li>
                <li class="slds-page-header__detail-block">
                    <lightning:outputField fieldName="Version__c" />
                </li>
                <li class="slds-page-header__detail-block">
                    <lightning:outputField fieldName="LastModifiedById" />
                </li>
                <li class="slds-page-header__detail-block">
                    <lightning:outputField fieldName="CreatedById" />
                </li>
            </ul>
        </lightning:recordViewForm>
    </div>
    <div class="slds-col">
        <lightning:recordViewForm recordId="a1HW0000002vh5xMAA" objectApiName="Payment__c">
            <ul class="slds-page-header__detail-row">
                <li class="slds-page-header__detail-block">
                    <lightning:outputField fieldName="Id" />
                </li>
                <li class="slds-page-header__detail-block">
                    <lightning:outputField fieldName="Name" />
                </li>
            </ul>
        </lightning:recordViewForm>
    </div>
</div>

I have tried to play around a lot with the chrome dev tool so it will align nicely but couldn't find any solution that would be OK

Is there any solution to display more than one lightning:recordViewForm object inside SLDS Page Header?

Answer 1

The best you can do is use a grid:

<lightning:layout>
  <lightning:layoutItem size="6">
    ...
  </lightning:layoutItem>
  <lightning:layoutItem size="6">
    ...
  </lightning:layoutItem>
</lightning:layout>

Note: if the fields are different sizes, the fields may not line up, but they will be side by side.