If you're looking for a solution using only CSS, here's an approach to tackle your issue.
To start off, I've set the width of the div with the class checkbox to 100%.
Next, I've made the image div have a display:inline-block property so that it doesn't span the entire width. Then, I positioned it to the right using float:right;. However, this might cause the parent element to ignore the height of the elements inside it, so I've included a clearfix technique. You can learn more about clearfix here.
CSS:
.MyDrugPix {
padding-right: 0px;
display: inline-block;
float: right;
}
.checkbox {
width: 100%;
}
Clearfix:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix {
zoom: 1;
}
/* IE6 */
*:first-child+html .clearfix {
zoom: 1;
}
.checkbox label:after,
.radio label:after {
content: '';
display: table;
clear: both;
}
.checkbox .cr,
.radio .cr {
position: relative;
display: inline-block;
border: 1px solid #a9a9a9;
border-radius: .25em;
width: 1.3em;
height: 1.3em;
float: left;
margin-right: .5em;
}
.radio .cr {
border-radius: 50%;
}
.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
position: absolute;
font-size: .8em;
line-height: 0;
top: 50%;
left: 20%;
}
.radio .cr .cr-icon {
margin-left: 0.04em;
}
/*My changes*/
.MyDrugPix {
padding-right: 0px;
display: inline-block;
float: right;
}
.checkbox {
width: 100%;
}
/*Clearfix for floating elements*/
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix {
zoom: 1;
}
/* IE6 */
*:first-child+html .clearfix {
zoom: 1;
}
/* IE7 */
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<a href="#acet" class="list-group-item" data-toggle="collapse" style="background-color: lightyellow;">
<div class="checkbox clearfix">
<label style="font-size: 1.5em">
ACETAMINOPHEN
</label>
<div class="MyDrugPix"><img src="http://via.placeholder.com/50x50" alt="DRUGS" class="img-responsive"></div>
</div>
</a>
If you are open to trying out a CSS3 solution, you can achieve the same result by setting just 3 properties!
CSS3
.checkbox {
display: flex !important;
justify-content: space-between;
align-items: center;
}
.checkbox label:after,
.radio label:after {
content: '';
display: table;
clear: both;
}
.checkbox .cr,
.radio .cr {
position: relative;
display: inline-block;
border: 1px solid #a9a9a9;
border-radius: .25em;
width: 1.3em;
height: 1.3em;
float: left;
margin-right: .5em;
}
.radio .cr {
border-radius: 50%;
}
.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
position: absolute;
font-size: .8em;
line-height: 0;
top: 50%;
left: 20%;
}
.radio .cr .cr-icon {
margin-left: 0.04em;
}
.checkbox {
display: flex !important;
justify-content: space-between;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<a href="#acet" class="list-group-item" data-toggle="collapse" style="background-color: lightyellow;">
<div class="checkbox">
<label style="font-size: 1.5em">
ACETAMINOPHEN
</label>
<div class="MyDrugPix" style="padding-right: 0px;"><img src="http://via.placeholder.com/50x50" alt="DRUGS" class="img-responsive"></div>
</div>
</a>