title: How to achieve a similar behavior to display: inline with flex items when text breaks?
body: <p>I have a piece of text (let's call it the &quot;title&quot;), and a &quot;badge&quot; on the right. I want the badge to stick to the end of the title when the title breaks.</p>
  <p>As in the following snippet, I could achieve this by setting the <code>display</code> of both the title and badge elements to either <code>inline</code> or <code>inline-block</code>:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    padding: 20px;
    border: 2px solid gray;
  }
  
  .small-container {
    max-width: 300px;
  }
  
  .title {
    display: inline;
    font-size: 2em;
  }
  
  .badge {
    display: inline;
    height: 20px;
    padding: 0 10px;
    background-color: yellow;
    border-radius: 15px;
    margin-left: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p style="color: gray"&gt;In a normal state:&lt;p&gt;
  &lt;div class="container"&gt;
    &lt;span class="title"&gt;This is the title of the product&lt;/span&gt;
    &lt;span class="badge"&gt;3.4 rating&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;p style="color: gray; margin-top: 30px"&gt;Now, when the container is not wide enough, the text breaks and the badge stays at the end of it, exactly what we want:&lt;p&gt;
  &lt;div class="container small-container"&gt;
    &lt;span class="title"&gt;This is the title of the product&lt;/span&gt;
    &lt;span class="badge"&gt;3.4 rating&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>With flexbox, on the other hand, the following snippet is what I've done, but the badge, in this case, doesn't stick to the end of the title when the title breaks, it instead creates a new line by itself:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    padding: 20px;
    border: 2px solid gray;
    
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  
  .small-container {
    max-width: 300px;
  }
  
  .title {
    display: inline;
    font-size: 2em;
  }
  
  .badge {
    display: inline;
    height: 20px;
    padding: 0 10px;
    background-color: yellow;
    border-radius: 15px;
    margin-left: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p style="color: gray"&gt;In a normal state:&lt;p&gt;
  &lt;div class="container"&gt;
    &lt;span class="title"&gt;This is the title of the product&lt;/span&gt;
    &lt;span class="badge"&gt;3.4 rating&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;p style="color: gray; margin-top: 30px"&gt;Now, when the container is not wide enough, the text breaks, BUT the badge goes to new line by itself:&lt;p&gt;
  &lt;div class="container small-container"&gt;
    &lt;span class="title"&gt;This is the title of the product&lt;/span&gt;
    &lt;span class="badge"&gt;3.4 rating&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>How do I achieve a similar result to my first snippet when I have a flex container?</p>