I'm trying to reproduce a bootstrap navigation component inside a page that display sub category and associated posts to those sub-categories like this:

1. Taxonomy term 1
   • taxonomy sub-term 1
     • Post 1
     • Post 2
     • etc...
   • taxonomy sub-term 2
     • Post 3
     • etc...

and visually I'm trying to reproduce this component (bootstrap 4 vertical nav pills):

<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
  <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
  <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
  <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
<div class="tab-content" id="v-pills-tabContent">
  <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
  <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
  <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
  <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>

In my Wordpress template, I wrote something like this to get each subcategory and looping them:

<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    <?php
                        //loop to display child terms
                        // Get children of current parent term
                        $childrens = get_term_children($businessLine->term_id, $businessLine->taxonomy); 
                        $count = 0;
                        foreach ($childrens as $child):
                            $count ++;
                            echo $count;
                            $term = get_term_by( "id", $child, $businessLine->taxonomy );

                            //prepare query to get posts in sub taxonomy
                            $args = array(
                                "post_type" => "offer",
                                "tax_query" => array(
                                    array(
                                        'taxonomy' => $businessLine->taxonomy,
                                        'field' => 'slug',
                                        'terms' => $term->slug
                                    )
                                )
                            );
                            $query = new WP_Query($args);
                    ?>
                   
                    <a class="nav-link active" id="v-pills-<?php echo $term->term_id ?>-tab" data-toggle="pill" href="#v-pills-<?php echo $term->term_id; ?>" role="tab" aria-controls="v-pills-<?php echo $term->term_id; ?>" aria-selected="true"><?php echo $term->name; ?><sup><span class="badge badge-primary badge-pill"><?php echo $term->count ?> offers</span></sup></a>
            </div>
            
            <div class="tab-content" id="v-pills-tabContent">
            <?php  if( $query->have_posts() ) : ?>
                <?php while( $query->have_posts()) : $query->the_post(); ?>
                <?php echo $count; ?>
                <div class="tab-pane fade show active" id="v-pills-<?php echo $term->term_id; ?>" role="tabpanel" aria-labelledby="v-pills-<?php echo $term->term_id; ?>-tab">
                    <?php the_title(); ?>
                </div>
                <?php endwhile; endif; wp_reset_postdata(); ?>
            </div>
            <?php  endforeach; ?>
            

$count variable was made to check how it loops

$businessLine variable is the current queried object (I'm in taxonomy-{name}.php template)

On the output, my DOM produce this behavior (sorry I'm obligated to mask out the output but <a class="nav-link"> display the sub taxonomy term correctly and same for <div class="tab-pane">)

What I don't understand is why my <a class="nav-link">sub-taxonomy link is outside the first component <div class="nav flex-column nav-pills"> after the first iteration of the foreach loop and why I have multiple <div class="tab-content"> created

Is there a way to display information side by side in this unique loop and achieving this bootstrap component or should I see in an another direction?

Thanks