title: How to align spans next each other with texte inside each one?
body: <p>I have this content generated dynamically like this</p>
  <p><img src="https://i.stack.imgur.com/UYY8j.png" alt="how it looks now " /></p>
  <p>But I want it like this  ' Offres et tableaux d'amortissement de tous les crédits en cours (Immobilier) [120000 €] '.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div _ngcontent-caj-c13=&quot;&quot; class=&quot;col-md-10 px-1 mb-md-0 mb-2 d-flex align-items-center&quot;&gt;
    Offres et tableaux d'amortissement de tous les crédits en cours 
    &lt;span _ngcontent-caj-c13=&quot;&quot; class=&quot;d-inline-block ng-star-inserted&quot;&gt;(Immobilier)&lt;/span&gt;
    &lt;span _ngcontent-caj-c13=&quot;&quot; class=&quot;ng-star-inserted&quot;&gt; [120000&amp;nbsp;€]&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>