Afficher un élément après un bloc de nouvelle ligne

Question

J'ai actuellement ceci :

Je souhaite mettre l'icône div à la fin du texte, mais comme c'est un "bloc", je n'arrive pas à le faire fonctionner.

Sortie souhaitée :

Extrait de code :

* {
  font-family: Arial, 'sans-serif'
}

.test {
  display: flex;
}

.info {
  font-family: 'monospace';
  background: black;
  width: 18px;
  height: 18px;
  aspect-ratio: 1;
  text-align: center;
  border-radius: 50%;
  color: white;
}

<div class="test">
    Donec rutrum congue leo eget malesuada.     Donec sollicitudin molestie malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <div class="info">i</div>
</div>

Answer 1

1. Retirer du conteneur display: flex (.test)
2. Changez l'icône d'information (.info）设置为 inline-block 并使用 display: inline-block

* {
  font-family: Arial, 'sans-serif'
}

.info {
  display: inline-block;
  font-family: 'monospace';
  background: black;
  width: 18px;
  height: 18px;
  aspect-ratio: 1;
  text-align: center;
  border-radius: 50%;
  color: white;
}

    Donec rutrum congue leo eget malesuada.     Donec sollicitudin molestie malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   
i

Answer 2

i