PHP echo display outside the div - php

Question

My project is to display a calendar with the number of the day on top of a "card" from the bootstrap library.
Under the number of the day I display the name of the day, what I want is just to echo a number or character on the right of the name of the day which come from a function.
The function return a value from a SQL query.
Screenshots:
The php with html
My function in php
My app in chrome
The code:
<?php
session_start();
include 'Cadre.php';
$date = new DateTime('2018-01-01');
$idEleve = 1;
$idClasse = 1;
try
{
$bdd = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', '');
}
catch(Exception $e)
{
die('Erreur : '.$e->getMessage());
}
function devoir($result, $idClasse, $idEleve, $bdd) {
try
{
$req = $bdd->prepare("SELECT `idMatiere` FROM devoir WHERE `idEleve` = :idEleve AND `dateDevoir` = :date_devoir OR `idClasse` = :id_classe AND `dateDevoir` = :date_devoir");
$req->execute(array(
':id_classe' => $idClasse,
':idEleve' => $idEleve,
':date_devoir' => $result));
while($devoir = $req->fetch()){
if($devoir['idMatiere']== 1){
echo $devoir['idMatiere'];
};
}
}
catch(Exception $e)
{
die('Erreur : '.$e->getMessage());
}
}
?>
<br>
<h1 class="display-4">Agenda</h1><p class="lead"> <?php echo $date->format('F'); ?></p>
<br>
<?php
echo '
<div class="row">
<div class="col-1"></div> ';
while(date_format($date, 'd') <= '30'){
if($date->format('l') != 'Saturday' AND $date->format('l') != 'Sunday'){
$result = $date->format('Y-m-d');
echo '
<div class="col-sm-2"><a href="https://google.com">
<div class="card">
<div class="card-body">
<h3 class="card-title">'.date_format($date, 'd').'</h3>
<h6 class="card-subtitle mb-2 text-muted">'. $date->format('l').devoir($result, $idClasse, $idEleve, $bdd).'</h6>
</div>
</div>
</a></div>';
}
else{
echo '</div><br>';
echo '
<div class="row">
<div class="col-1"></div>';
}
$date->modify('+1 day');
}
echo '</div>
<br>';
?>
<br>
<div class="row">
<div class="col-1"></div>
<div class="col-4">
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Mois précédent</a></li>
<li class="page-item"><a class="page-link" href="#">Mois courrant</a></li>
<li class="page-item"><a class="page-link" href="#">Mois suivant</a></li>
</ul>
</nav>
</div>
<div class="col-7"></div>
</div>
</div>
</body>
Thanks a lot for taking the time to read and sorry for my english <3

Answer 1

remove the h6 element and replace it with span inside h3
since the heading elements like H3 , H6 display as block .
<div class="card-body">
<h3 class="card-title">'.date_format($date, 'd').' <span> class="card-subtitle mb-2 text-muted">'. $date->f
ormat('l'). devoir($result, $idClasse, $idEleve, $bdd).'</span>
</h3>
</div>