Profile Toggler

<div class="nav nav-pills mb-2">
    <a class="nav-link active" type="button" href="#profile-1" data-toggle="tab" aria-controls="profile-1">Language 1</a>
    <a class="nav-link" type="button" href="#profile-2" data-toggle="tab" aria-controls="profile-2">Language 2</a>
</div>

 <div id="profiles">
    <div class="tab-content">

        <div id="profile-1" class="tab-pane fade show active">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12 d-flex col-md-4" style="flex-flow: column;">
                        <div class="row bg-faded mb-3">
                            <div class="col">
                                <div class="p-4">
                                    <h2>Example</h2>
                                </div>
                            </div>
                        </div>

                        <div class="row bg-faded " style="flex-grow: 1;">
                            <div class="col">
                                <div class="p-4">
                                     Nam in nisl et elit maximus porttitor in aliquam metus. Curabitur sit amet neque quam. Pellentesque eu pulvinar erat, a faucibus lectus. Aliquam sed sollicitudin mi. Nam non dapibus leo, quis interdum nunc. Phasellus hendrerit quam placerat interdum pharetra. In tellus magna, scelerisque ac elementum nec, tempor id risus. Aliquam efficitur magna sit amet turpis semper mollis. Maecenas euismod elementum magna non vestibulum. Proin a consectetur quam.
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-md-8 d-flex">
                        <div class="p-4 bg-faded">
                            <p>Aenean placerat risus leo. Duis sit amet libero et libero posuere semper vitae eget diam. Maecenas at dignissim nunc. Donec non purus id metus ultricies sagittis. Nullam pellentesque odio sit amet augue eleifend suscipit. Sed ut felis eu magna dignissim dignissim. Vivamus nibh dui, fringilla eu semper a, interdum et tortor. Nam diam ipsum, ullamcorper vitae ipsum a, consectetur ornare leo. Curabitur sed pretium augue. Phasellus ultricies hendrerit elementum.</p>
                            <p>In in lacus iaculis, mollis erat at, tempus purus. Praesent eget condimentum justo. Vivamus porta turpis at aliquet dapibus. Cras dignissim velit laoreet, efficitur lorem nec, tincidunt ex. Phasellus suscipit ligula vitae convallis sodales. Suspendisse suscipit facilisis ipsum ac tincidunt.</p>
                       </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="profile-2" class="tab-pane fade">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12 col-md-4 d-flex" style="flex-flow: column;">
                        <div class="row bg-faded mb-3">
                            <div class="col">
                                <div class="p-4">
                                    <h2>Exemplar</h2>
                                </div>
                            </div>
                        </div>

                        <div class="row bg-faded" style="flex-grow: 1;">
                            <div class="col">
                                <div class="p-4">
                                    Nunc dignissim, augue et aliquam condimentum, libero leo dignissim purus, et facilisis urna enim nec tortor. Quisque bibendum viverra enim, sit amet faucibus nulla. Aliquam varius vestibulum gravida. Nullam sit amet rhoncus neque. Phasellus vulputate congue ipsum, ut cursus est vulputate ac. Cras imperdiet dolor sed tortor vehicula ullamcorper. Etiam sit amet sem id purus molestie egestas. Donec volutpat sapien a lectus facilisis hendrerit.
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-md-8 d-flex">
                        <div class="p-4 bg-faded">
                            <p>Vestibulum accumsan blandit nisi et pretium. Sed a purus consequat nulla suscipit interdum non ac lacus. Cras neque nisi, lobortis sit amet tristique sed, suscipit quis justo. Vivamus vel dui mauris. Praesent vel lorem eu tellus laoreet feugiat. Suspendisse leo metus, fringilla at rhoncus ac, consequat sed dolor. Sed ultricies in nisl non malesuada. Nulla feugiat feugiat turpis a aliquet. Sed in turpis fringilla, fermentum nunc pellentesque, volutpat ex.</p>
                            <p>Pellentesque placerat sit amet lorem volutpat eleifend. Aliquam ullamcorper nibh eu ligula fringilla placerat. Integer a arcu lacinia, vehicula ante nec, tempor magna. Etiam at metus sed diam placerat fringilla. Donec libero odio, dignissim eget diam at, tincidunt aliquam risus.</p>
                       </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>