Image example:
And the code in JSBIN .
The situation is that I am trying to create a list of checkboxes with labels with an “information icon” next to each.
The idea is that if you click on the shortcut, it activates the checkbox (as it should), and then we will undo some actions with JS.
The info icon is a tooltip that you click to get more information. Since the information icon has its own interaction, we cannot insert it inside the inside of the label, since the label disables the interaction of the flag.
So what I'm trying to do is to keep the information icon as close as possible to the label text. I did this, leaving all the shortcuts on the left so that they would collapse as much as necessary. Then I give the labels the maximum width so as not to bring the info icon to the next line.
Problem: note that if the label does not wrap (the first), the label only crashes to the width of the text (green border). However, as soon as the label needs to be wrapped (every other example), the label takes its maximum size. It looks ridiculous if you pick up the green border, as the information icons now seem to visually float at an arbitrary and seemingly random distance from the text.
Question: is there a way to minimize the popup to the same width as the text when the text wraps, or is it just how it works in CSS?
EDIT:
To clarify, I would like the image / code above to eventually produce something similar to this:
Please note that all labels (green borders) are collapsed only to the width of the text - even those where the text is wrapped.
EDIT 2:
I think I understand the problem ... the problem is that the text only wraps BECAUSE IT IS MAXIMUM. In other words, the content (text) is much wider than max-width, so it is not possible for a div to be reset to a certain width if it is not explicitly specified.
So I do not think there is a solution to this. CSS is simply not configured for this.