I am trying to create a Lightning Page Template aura component that has two equal sized regions. Between the regions is a button which when clicked collapses the left region, and the right resizes taking the full screen width. When the button is re-clicked the left region expands taking half page width again, and the right region resizes to take the remaining space (half the screen less the button width).

On the initial left region collapse, the right region correctly resizes to take the full width of the screen. The problem I am having is that when the left region re-expands, the right region remains at the full width and goes off screen introducing horizontal scrolling, instead of resizing again to the smaller remaining width (just under half the screen width).

Note I am not a developer so any help is appreciated.

This is the cmp file I tried:

<aura:component implements="lightning:recordHomeTemplate" description="Test Layout"> 
<aura:attribute name="left" type="Aura.Component[]" />
<aura:attribute name="right" type="Aura.Component[]" />
<aura:attribute name="isLeftVisible" type="Boolean" access="PRIVATE" default="true" />
<div>
    <lightning:layout>
        <aura:if isTrue = "{!v.isLeftVisible}">
            <lightning:layoutItem size="{! $Browser.isDesktop ? '6' : '12' }" class="slds-var-m-     right_small"> 
                {!v.left}
            </lightning:layoutItem>
        </aura:if>
        <lightning:layoutItem flexibility="no-flex">
            <lightning:buttonIcon 
            onclick ="{!c.toggleSection}"                                     
            variant="border-filled"
            iconName="{! v.isLeftVisible ? 'utility:chevronleft' : 'utility:chevronright' }" 
            alternativeText="{! v.isLeftVisible ? 'Expand Sidebar' : 'Collapse Sidebar' }"
            class="slds-var-m-left_small"/>
        </lightning:layoutItem>
        <lightning:layoutItem flexibility="auto"> 
            {!v.right}
        </lightning:layoutItem>
    </lightning:layout>
</div>  
</aura:component>

And Controller.js:

({
    toggleSection : function(component, event, helper) {
    component.set('v.isLeftVisible', !component.get('v.isLeftVisible'));
    }
})

Does anyone have any suggestions why the right region wont resize again even with flexibility=”auto”?