Cannot add element in the same line

Question

I'm trying to make a favourite checkbox on the right side of the div, this is the html structure:

.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;
}

<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>

if you look at the JSFIDDLE, you will see that the checkbox is greather than the container, how can I manage this?

Answer 1

There are a few things I would change:

1. use flex instead of float
2. use a label for your star instead of the input itself
3. remove the absolute positioning - it's not needed and can just complicate things
4. don't mix inline styles with css - it's best to use all css (I haven't fixed this though)

/* seperate the checkbox and star styles */
.group-checkbox { 
  display:none;
}
.group-checkbox:checked + .star:before {  /* using the adjacent sibling selector to selec the star after a checked input */
  content: "\2606";
}

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

.star:before {
  content: "\2605";
}


.group {
  background-color: #20262e;
  line-height:30px; /* may want to match the size of the star font */
  display:flex;    /* make the container flex */
  width:100%;
}

.group .font-weight-bold {
   flex-grow:1;         /* make this label grow to fill the space the star doesn't take */
}

<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" class="group-checkbox" id="checkbox"><!-- give this an id -->
  <label class="star" for="checkbox"><!--use a label and point it at the id of the chechbox so that you can click on it to change the status--></label>
</div>

Answer 2

My solution it's to suggest you to use flexbox it's very easy to understand, your problem is come from the font-size that you assign on your icon. You need to reduce font-size and on the parent make the CSS I make for you :)

.group {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
}
.star {
    position: relative;
    visibility: hidden;
    font-size: 20px;
    cursor: pointer;
    color: orange;
}

.star:before {
  content: "\2605";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  visibility: visible;
}

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

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

<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>

Answer 3

Please add position: relative; to .group and adjust the star position accordingly. check below:

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

.star:before {
  top: -3px;
  right: 2px;
  content: "\2605";
  position: absolute;
  visibility: visible;
}

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

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

<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>