How do i have SLDS box align next to each other with same height

Question

I know this is mostly related to css, but i just want to see if this can be accomplished using available classes in SLDS.

Here is what i am trying to accomplish. I want to have 2 box side by side with fields in it. But need both the box to be of same height. I cant find on SLDS css to set both boxes with same height.

Any thoughts on how to accomplish this would be great

 <div class="slds-grid slds-wrap ">
        <br/>

            <div class="slds-col slds-size_1-of-1 slds-medium-size_6-of-12 slds-large-size_6-of-12">
                <div class="slds-box" >
                    <div class="slds-text-title_caps"></div>
                    <div class="slds-form slds-form_horizontal">
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" for="input-id-01">Field1</label>
                            <div class="slds-form-element__control">
                              <apex:outputfield styleclass="slds-input" value="{!fshC.Franchisee__c}"/>
                            </div>
                          </div>
                          <div class="slds-form-element">
                            <label class="slds-form-element__label" for="input-id-01">Franchisee Last Date of Service</label>
                            <div class="slds-form-element__control">
                              <apex:inputfield value="{!fshC.Franchise_Final_Date_Of_Service__c}"/>
                            </div>
                          </div>


                          <div class="slds-form-element">
                            <label class="slds-form-element__label" for="input-id-01">Reason Lost</label>
                            <div class="slds-form-element__control">
                              <apex:inputfield styleclass="slds-input"  value="{!fshC.Reason_Lost__c}"/>
                            </div>
                          </div>
                          <div class="slds-form-element">
                            <label class="slds-form-element__label" for="input-id-01">Reason Lost Notes</label>
                            <div class="slds-form-element__control">
                              <apex:inputfield styleclass="slds-input"  value="{!fshC.Reason_Lost_Notes__c}"/>
                            </div>
                          </div>
                          <div style="display:none">
                          <div class="slds-form-element">
                            <label class="slds-form-element__label" for="input-id-01">Off Boarding Type</label>
                            <div class="slds-form-element__control">
                              <apex:inputfield styleclass="slds-input"  value="{!fshC.Off_Boarding_Type__c}"/>
                            </div>
                          </div>
                          <div class="slds-form-element">
                            <label class="slds-form-element__label" for="input-id-01">Status</label>
                            <div class="slds-form-element__control">
                              <apex:inputfield styleclass="slds-input"  value="{!fshC.Franchise_History_Status__c}"/>
                            </div>
                          </div>
                          </div>
                    </div>
                </div>
              </div>
              <div class="slds-col slds-size_1-of-1 slds-medium-size_6-of-12 slds-large-size_6-of-12">
                  <div class="slds-box " >
                      <div class="slds-text-title_caps">Receving Franchise</div>
                        <div class="slds-form slds-form_horizontal">
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" for="input-id-01">Franchisee</label>
                            <div class="slds-form-element__control">
                              <apex:inputfield value="{!fshR.Franchisee__c}"/>
                            </div>
                          </div>

                          <div class="slds-form-element">
                            <label class="slds-form-element__label" for="input-id-01">Franchise First Date of Service </label>
                            <div class="slds-form-element__control">
                              <apex:inputfield value="{!fshR.Franchise_First_Date_of_Service__c}"/>
                            </div>
                          </div>


                    </div>
                </div>
              </div>
</div> 

Answer 1

Use Flexbox

While I do not believe there is a Lightning Design System (SLDS) class specifically for lining up elements by height, you can still create a custom class called slds-flex to force elements to display as flex to align the boxes vertically (in terms of height):

<style>
.slds-flex {
    display: -ms-flexbox !important;
    display: flex !important;
}
</style>

Next, you can implement the class to the appropriate elements using the following example as a reference:

<div class="slds-scope">
    <div class="slds-grid slds-wrap">
        <div id="columns" class="slds-box slds-flex">
            <div id="column-1" class="slds-size_1-of-2 slds-flex">
                <div class="slds-box">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida neque convallis a cras semper. Imperdiet proin fermentum leo vel orci porta non pulvinar neque. Elit duis tristique sollicitudin nibh sit amet. Libero volutpat sed cras ornare arcu dui vivamus. Feugiat in ante metus dictum. Velit aliquet sagittis id consectetur. Imperdiet nulla malesuada pellentesque elit eget gravida cum. Quam nulla porttitor massa id neque. Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. At erat pellentesque adipiscing commodo elit at imperdiet dui. Massa tincidunt dui ut ornare lectus sit amet est placerat. Duis ut diam quam nulla. Orci dapibus ultrices in iaculis nunc sed augue. Quis risus sed vulputate odio ut enim. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Libero enim sed faucibus turpis in eu mi.</p>
                </div>
            </div>
            <div id="column-2" class="slds-size_1-of-2 slds-flex">
                <div class="slds-box">
                    <p>Integer feugiat scelerisque varius morbi enim. Vitae nunc sed velit dignissim sodales ut eu sem integer. Odio aenean sed adipiscing diam. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat. Dui accumsan sit amet nulla facilisi morbi tempus. Semper risus in hendrerit gravida rutrum quisque non tellus. Ornare suspendisse sed nisi lacus sed viverra. Turpis massa sed elementum tempus egestas. Nam aliquam sem et tortor consequat id porta nibh venenatis. Donec pretium vulputate sapien nec sagittis. Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Aenean euismod elementum nisi quis eleifend quam adipiscing. Ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. Feugiat in ante metus dictum at tempor. Blandit massa enim nec dui nunc mattis enim. Metus vulputate eu scelerisque felis imperdiet proin. Leo urna molestie at elementum eu.</p>
                    <p class="slds-m-top_medium">Suscipit tellus mauris a diam maecenas. Sed libero enim sed faucibus. Etiam sit amet nisl purus in mollis nunc. Tellus orci ac auctor augue mauris augue neque gravida. Bibendum enim facilisis gravida neque convallis a cras. Ullamcorper a lacus vestibulum sed arcu non odio euismod. Fermentum leo vel orci porta non pulvinar neque. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Bibendum arcu vitae elementum curabitur. Posuere lorem ipsum dolor sit amet consectetur. Pellentesque diam volutpat commodo sed egestas egestas. Diam donec adipiscing tristique risus nec. Mauris ultrices eros in cursus. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet. Porta nibh venenatis cras sed felis eget velit aliquet sagittis.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Result:

You can see the result below showing two elements which are the same height, regardless of the content in each element: