JavaScript - How to get text of active child and Parent Elements in a Menu

Using JavaScript Only, I'm trying to get the text of the active child menu element (class=item active child) which would be "Basic Details" in the example and also the parent text which would be "Customer Information" in the example provided. Please note: the class for the parent div can be different for each menu item (e.g. "c-info" or "item c-info").

<div class="grid-col-menu">
    <div class="c-info">Customer Information</div>
    <div class="side-menu">
        <div class="side-menu-parent">
            <div class="item child"><span>Associated Individuals</span></div>
            <div class="item active child"><span>Basic Details</span></div>
            <div class="item child" hidden=""><span>Additional Information</span></div>
        </div>
    </div>
    <div class="side-menu-parent">
        <div class="item c-info">Individual Information</div>
        <div class="side-menu-child" hidden="">
            <div class="item child"><span>Basic Details</span></div>
            <div class="item child" hidden=""><span>Additional Information</span></div>
        </div>
    </div>
    <div class="item c-info">Summary</div>
    <div class="c-info" hidden="">Documents</div>
    <div class="side-menu-child" hidden="">
        <div class="item child"><span>Upload &amp; esign</span></div>
    </div>
</div>

Select allOpen in new window

Please no jQuery, JavaScript only. Here is an example of the menu when different items  are selected. Thank you!