How to achieve a similar behavior to display: inline with flex items when text breaks?

user_7734384 0
Viewed 42

I have a piece of text (let's call it the "title"), and a "badge" on the right. I want the badge to stick to the end of the title when the title breaks.

As in the following snippet, I could achieve this by setting the display of both the title and badge elements to either inline or inline-block:

.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;
}
<p style="color: gray">In a normal state:<p>
<div class="container">
  <span class="title">This is the title of the product</span>
  <span class="badge">3.4 rating</span>
</div>

<p style="color: gray; margin-top: 30px">Now, when the container is not wide enough, the text breaks and the badge stays at the end of it, exactly what we want:<p>
<div class="container small-container">
  <span class="title">This is the title of the product</span>
  <span class="badge">3.4 rating</span>
</div>

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:

.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;
}
<p style="color: gray">In a normal state:<p>
<div class="container">
  <span class="title">This is the title of the product</span>
  <span class="badge">3.4 rating</span>
</div>

<p style="color: gray; margin-top: 30px">Now, when the container is not wide enough, the text breaks, BUT the badge goes to new line by itself:<p>
<div class="container small-container">
  <span class="title">This is the title of the product</span>
  <span class="badge">3.4 rating</span>
</div>

How do I achieve a similar result to my first snippet when I have a flex container?

flexbox css html
1 Answers

Wouldn't it make sense to treat the whole thing as one flex-item? That way they will remain together as if inline.

<span class="title">This is the title of the product<span class="badge">3.4 rating</span></span>
user_137081420
Related