Bootstrap 4 issue with div content of different sizes - html

Question

I am stuck with the following issue, as per the below script, where the data in a div is not always the same size, which results in the div NOT taking the entire horizontal space allocated by the use of the col-6 class, from one row to the next:
<div class="card-body " >
<div class="row comments_container" id="comments_container">
<?php foreach ($comments AS $comment){?>
<div class="callout <?php echo $comment['comment_callout'];?>">
<div class="row">
<div class="col-3"><?php echo '<span class="text-bold">De: </span>'.$comment['comment_author'];?></div>
<div class="offset-6 col-3">Envoyé le: <?php echo $comment['comment_date'];?></div>
</div>
<div class="row">
<div class="offset-3 col-6 border-primary border-left">
<?php
if (!empty($comment['comment_parent_author'])){echo 'En réponse à '.$comment['comment_author'].'.<br/>';}
echo '<span class="text-xs">'.$comment['comment_content'].'</span>';
?>
</div>
<div class="col-3"></div>
</div>
<div class="row justify-content-center border-top mt-2 pt-2 border-thick border-primary w-100">
<div class="col-1">Approuver</div>
<div class="col-1">Répondre</div>
<div class="col-1">Indésirable</div>
<div class="col-1">Corbeille</div>
</div>
</div>
<?php } ?>
</div>
</div>
As you can see also from the below adjoined screenshot, when the $comment['comment_content'] data is not the same size, or smaller, it results in the div containing the smallest data not 'respecting' the col-6 class, eg. only taking the smallest data field's size

Answer 1

Your classes are not formatted very well try this :
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container card-body">
<div class="row comments_container" id="comments_container">
<div class="col-3"><span class="text-bold">De:John john</span></div>
<div class="offset-6 col-3">Envoyé le : 31 mai 2020 </div>
</div>
<div class="offset-3 col-6 border-primary border-left">
<span class="text-xs">Commentaire</span>
</div>
<div class="row justify-content-center border-top mt-2 pt-2 border-thick border-primary w-100">
<div class="p-1">Approuver</div>
<div class="p-1">Répondre</div>
<div class="p-1">Indésirable</div>
<div class="p-1">Corbeille</div>
</div>
</div>