Place div to the right side of the text

Question

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

First one containing text,
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>

maybe this question can help. https://stackoverflow.com/questions/37406353/make-container-shrink-to-fit-child-elements-as-they-wrap — Saeed Shamloo, Feb 09 '22 at 10:21

score 1 · Answer 1 · answered Feb 09 '22 at 10:06

1

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

For example:

width: min-content;

answered Feb 09 '22 at 10:06

Saeed Shahbazi

139
2
6

In this case, all words will be moved to the next line, even if the text is short and can fit on one line. – Sergey Tyupaev Feb 09 '22 at 10:15

score 1 · Answer 2 · answered Feb 09 '22 at 13:33

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>

score 0 · Answer 3 · answered Feb 09 '22 at 10:14

0

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

answered Feb 09 '22 at 10:14

Vivek Tarsariya

127
9

score 0 · Answer 4 · answered Feb 09 '22 at 10:20

0

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>

answered Feb 09 '22 at 10:20

Andrei Teodorescu

21
4

You've added the
tag to the text in the first child. But it is dynamic, and for example it may come from the backend – Sergey Tyupaev Feb 09 '22 at 10:23
Remove the
and now it follows the content but i think that you really need is a good old fashion "width" on the ".first-child". – Andrei Teodorescu Feb 09 '22 at 10:31
Or better yet: a "max-width". – Andrei Teodorescu Feb 09 '22 at 10:37

score 0 · Answer 5 · answered Feb 09 '22 at 13:49

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>

prograk · Answer 6 · 2022-02-15T04:14:21.137

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>

Only HTML/CSS way to get what ur looking for. Let me know if this works. — prograk, Feb 15 '22 at 03:57

Place div to the right side of the text

6 Answers6