Css label not going full width on multiplelines - css

Question

I have no way of explaining this better.
Please see this fiddle: https://jsfiddle.net/4vosLvxg/3/
<div class="col-md-12 " style="display: flex;">
<div class="checkbox">
<label class="tooltips">
<input type="checkbox"> Système d'avertissement de collision
et frein de secours automatique
</label>
</div>
<a class="tool-tip"></a>
</div>
The CSS is irelevant since I've tried all known combinations.
What I (my client) want(s) is to make the infobutton appear near the text (label) but not inside the label.
To reproduce the issue one must resize the window till the last word goes on a new line. Then he will see that the label's width won't be as long as the longest line.
Hours wasted: ~14
Any suggestion/hack will do.
EDIT:
This explains it better:

Answer 1

Here's what I think you are asking for. Please note the change in html markup:
.checkbox {
display: inline-block;
position: relative;
padding-left: 15px;
}
.checkbox input[type=checkbox] {
float: left;
margin-left: -15px;
}
.checkbox label {
text-align: justify;
display: inline-block;
}
.checkbox a.tool-tip {
width: 14px;
background: url("http://www.chromachklist.com/wp-content/uploads/2012/06/InfoButton0.png") right no-repeat;
padding: 10px;
position: absolute;
right: 0;
top: 0;
}
.tooltips a.tool-tip {
visibility: hidden;
position: initial;
float: right;
}
<div class="col-md-12 " style="display: flex;">
<div class="checkbox">
<a class="tool-tip"></a>
<label class="tooltips">
<a class="tool-tip"></a>
<input type="checkbox"> Système d'avertissement de collision et frein de secourssssssssss automatique
</label>
</div>
</div>