Auto adjust Salesforce tabs in custom lightning template page as per OOTB lightning template page

Question

I have created a custom lightning template page and in bottom its divided into two parts. But when I add tabs in one of the component even though I have given size to lightning:layout the tabs header goes out of the width of component. Can someone please help if they have solved this issue?

Basically I want the component to be resized and auto adjusted based on screen/window size as it happens in the OOTB lightning template page.

Section 3 is the place where I am facing an issue. Thanks in Advance. Below is the code

<aura:component description="CustomClientPageTemplate" implements="lightning:recordHomeTemplate" access="global">
        <aura:attribute access="global" name="section3" type="Aura.Component[]"/>
        <aura:attribute access="global" name="section4" type="Aura.Component[]"/>
        <aura:attribute access="global" name="left" type="Aura.Component[]"/>
        <aura:attribute access="global" name="right" type="Aura.Component[]"/>
    <div aura:id="container">
        <lightning:layout class="{! $Browser.isDesktop ? '' : 'slds-wrap'}">
            <lightning:layoutItem class="{! ($Browser.isDesktop ? 'widthFix' : '' ) + ' slds-p-around_x-small'}" flexibility="auto">
                {!v.left}
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" >
                <lightning:layout multipleRows="true">
                    <lightning:layoutItem size="12" flexibility="auto" class="slds-p-top_x-small slds-p-bottom_x-small"  largeDeviceSize="12" mediumDeviceSize="8" smallDeviceSize="6">
                        {!v.right}
                    </lightning:layoutItem>
                    <lightning:layoutItem size="12">
                        <lightning:layout >
                            <lightning:layoutItem size="8" class="slds-p-around_x-small">
                                {!v.section3} // this is the section where I am facing an issue.
                            </lightning:layoutItem>
                            <lightning:layoutItem size="4">
                                {!v.section4}
                            </lightning:layoutItem>
                        </lightning:layout> 
                    </lightning:layoutItem>
                </lightning:layout>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</aura:component>

Below is the Screenshot of the page::