onclick event include the remaining space

Question

In the following HTML code, when I click on text a message is shown. I need that onclick event include the white space on the right of text too.

 <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <span class="list-group-item" type="button"> <span class="label label-primary label-as-badge">3</span> <span class="label label-default label-as-badge">1</span> <span class="label label-success label-as-badge">0</span> <span onclick="alert('you click me')">my text</span> </span> 

Update

Since my words are ambiguous to some people, I show it by an image. The blue oval shows region of onclick operation. And the red oval shows the range that I want to expand this event. If user click in the red oval, this event must be activated.

Answer 1

You will need to use a table like layout using display:table & display:table-cell on the elements and give the element 'width:100%' you want to take up the remaining space in the row

 <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <span style="display:table;width:100%;" class="list-group-item" type="button"> <span style="display:table-cell;" class="label label-primary label-as-badge">3</span> <span style="display:table-cell;" class="label label-default label-as-badge">1</span> <span style="display:table-cell;" class="label label-success label-as-badge">0</span> <span style="display:table-cell;width:100%;background-color:#ccc;" onclick="alert('you click me')">my text</span> </span>