将 div 放置在文本的右侧

Question

I have a div with a fixed width. It has two children:

1. First one containing text,
2. The second one is something like a "badge" (just a div with fixed width and height).

So I want to achieve something like this:-

I want the second child to be located right next to the text of the first child

I've tried to solve this issue by adding display: flex to the parent, but the problem is that the first child takes width more than its contents (example in the snippet below)

I've tried to add flex-basis: 0 to the first child, but then each word starts with a new line, even if there is enough place to display the whole text in one line.

Maybe there is another solution? I've tried to solve the issue using absolute positioned child but failed also.

 .parent { width: 150px; background: lightblue; display: flex; align-items: center; }.first-child { outline: 1px solid red; }.first-child span { outline: 1px solid white; }.second-child { outline: 1px solid blue; width: 20px; height: 10px; flex-shrink: 0; }

 <div class="parent"> <div class="first-child"> <span>Loooooooong teeeeeext</span> </div> <div class="second-child"> </div> </div> <br /><br /> <div class="parent"> <div class="first-child"> <span>Short text</span> </div> <div class="second-child"> </div> </div>

Answer 1

You can only use width as min-content; for your text element.

For example:

width: min-content;

Answer 2

Maybe you can try to solve with the js code after documentReady!

document.querySelectorAll('.first-child').forEach(t => {t.style.width=t.querySelector('span').offsetWidth+'px'})

---

 document.querySelectorAll('.first-child').forEach(t => {t.style.width=t.querySelector('span').offsetWidth+'px'})

 .parent { width: 150px; background: lightblue; display: flex; align-items: center; }.first-child { outline: 1px solid red; }.first-child span { outline: 1px solid white; }.second-child { outline: 1px solid blue; width: 20px; height: 10px; flex-shrink: 0; }

 <div class="parent"> <div class="first-child"> <span>Loooooooong teeeeeext</span> </div> <div class="second-child"> </div> </div> <br /><br /> <div class="parent"> <div class="first-child"> <span>Short text</span> </div> <div class="second-child"> </div> </div>

Answer 3

Simply use display: inline propert in right text. and use display: block property in parent div.

Answer 4

The solution would be to add "flex: 0 0 auto;" on the ".first-child".

 .parent { width: 150px; background: lightblue; display: flex; align-items: center; }.first-child { outline: 1px solid red; flex: 0 0 auto; }.first-child span { outline: 1px solid white; }.second-child { outline: 1px solid blue; width: 20px; height: 10px; flex-shrink: 0; }

 <div class="parent"> <div class="first-child"> <span>Loooooooong <br>teeeeeext</span> </div> <div class="second-child"> </div> </div> <br /><br /> <div class="parent"> <div class="first-child"> <span>Short text</span> </div> <div class="second-child"> </div> </div>

Answer 5

This solution uses an addition to the HTML contents, which won't work for dynamic contents, but I'll post it nevertheless – for fixed content it works:

If you just add a linebreak / <br/> tag beween the words in your long text, it does what you want (no other changes to your code necessary):

 .parent { width: 150px; background: lightblue; display: flex; align-items: center; }.first-child { outline: 1px solid red; }.first-child span { outline: 1px solid white; }.second-child { outline: 1px solid blue; width: 20px; height: 10px; flex-shrink: 0; }

 <div class="parent"> <div class="first-child"> <span>Loooooooong<br/>teeeeeext</span> </div> <div class="second-child"> </div> </div> <br /><br /> <div class="parent"> <div class="first-child"> <span>Short text</span> </div> <div class="second-child"> </div> </div>

Answer 6

I hope this is what you are looking for to make the 2nd div to take the right end you can use justify-content: space-between;

Update: I misread the question, I've made changes in code and it works as expected using CSS.

 .parent { width: 150px; background: lightblue; display: flex; align-items: center; justify-content: flex-start; }.first-child { outline: 1px solid red; flex: .5; }.first-child span { outline: 1px solid white; }.second-child { outline: 1px solid blue; width: 20px; height: 10px; flex-shrink: 0; }

 <div class="parent"> <div class="first-child"> <span>Loooooooong teeeeeext</span> </div> <div class="second-child"> </div> </div> <br /><br /> <div class="parent"> <div class="first-child"> <span>Short text</span> </div> <div class="second-child"> </div> </div>