DIV

Bonjour,

Je fais un site à partir des données d'une API
Sur une de mes pages j'ai 2 div dont voici le squelette.

echo '<div class="div1">';
echo '<span class="details">Titre de ma Div1</span> :<br/><br/>';
Ici mon code API 1
 echo '</div>'; 

echo '<div class="div2">'; 
echo '<span class="details">Titre de ma Div2</span> :<br/><br/>';
Ici le code de mon API 2 
 echo '</div>'; 

Le "Titre de ma Div2 se met sur la même ligne que le dernier élément du contenu de ma div1 -(alors que je veux faire un saut de ligne). Donc dans mon CSS j'ai mis un

padding-top:20%; 

pour faire ce saut de ligne.
Mon problème c'est que le contenu de la div1 fluctue suivant la recherche des utilisateurs. Quand le contenu de la div1 est important, le titre de la div2 se remet sur la même ligne que la fin du contenu de la div1. J'aimerai que le titre de la div2 fasse un saut de ligne quelque soit la longueur du contenu de la div1.

Après le contenu des div n'est que du script PHP affichant le contenu de mon API et il fonctionne parfaitement

Bonjour et bienvenue,

Par défaut l'élément div est en display: block; et va donc s'afficher sous une autre div. Tu as donc d'autres CSS qui modifient l'affichage. Une largeur width ou un parent en display: flex; ou grid, un flottant...
Regarde dans l'Inspecteur de ton navigateur si tu sais t'en servir (F12) ou bien regarde / simplifie le reste de tes CSS, ça devrait te mettre sur une piste.
Enfin ça c'est pour tes 2 blocs, les span eux sont en display: inline; et pourraient avoir le code API N à leur côté (à la suite). Mais c'est pas pour autant, toujours par défaut, que les 2 span pourraient se retrouver côte à côte.

Note sur tes éléments : un titre devrait être balisé par un h1, h2, ..., h6 : si tu as un h1 titre du contenu de ta page et un h2 titre de tous les codes API, ce seraient des sous-titres du h2 donc h3.