How to stretch components vertically so they are the same height as their 'sibling' lightning:layoutitem component/s?

Question

I am using the lightning:layout and lightning:layoutItem components to build a new lightning page. It is a basic layout with only two columns. I'd like the two columns to be the same height, but their height is currently governed by their individual content.

lightning:layoutItem has a 'flexibility' attribute which allows you to define the horizontal behaviour of these columns. Is there an equivalent for the vertical alignment of columns?

<lightning:layout multipleRows="true" horizontalAlign="center" verticalAlign="centre">
    <!--Header - Progress Indicator-->
    <lightning:layoutItem size="8"  flexibility="auto">
        <div class="slds-card" style="height:100%">
            <c:PlatformMessageFormProgressIndicator currentPage="{!v.currentPage}"/>
            Platform Message Actions (Save, Next, Previous, Cancel)
        </div>
    </lightning:layoutItem>   
    <!--Right Panel - Message Preview Window -->
    <lightning:layoutItem size="4" padding="horizontal-small" flexibility="auto">
        <div class="slds-card" style="height:100%">
        <c:PlatformMessageFormPreviewWindow messageType="{!v.messageType}" currentDateTimeString="{!v.currentDateTimeString}"/>
            </div>
    </lightning:layoutItem>
</lightning:layout>

Answer 1

You need to use verticalAlign="stretch" in lightning:layout and should have lightning-layout-item flexibility="auto". Below is a sample code from Salesforce Documentation:-

<aura:component>
    <p>The layout items extend vertically to fill the container.</p>
    <div class="c-container">
        <lightning:layout verticalAlign="stretch" multipleRows="true" class="x-large">
            <lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
                1
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
                2
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
                3
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
                4
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</aura:component>

You can have a detailed look here:- Lightning Layout Vertical Align Stretch