Bootstrap 4

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">
<div class="group text-truncate">
  <label class="font-weight-bold"> 
    <span class="align-middle text-truncate" style="color:white">This is a long text</span> 
    <span class="align-middle" style="color: orange;">(3 items)</span>
   </label>
   <input type="checkbox" style="float:right;" class="group-checkbox star"></div>

CSS

.star {
    visibility: hidden;
    font-size: 30px;
    cursor: pointer;
    color: orange;
}

.star:before {
  content: "\2605";
  position: absolute;
  visibility: visible;
}

.star:checked:before {
  content: "\2606";
  position: absolute;
}

.group{
  background-color: #20262e;
}