Невозможно добавить элемент в одну строку

Ответ 1

Мое решение это предложить вам использовать flexbox это очень легко понять, ваша проблема исходит из font-size который вы назначаете на свой значок. Вам нужно уменьшить font-size а родительский сделать CSS, который я вам сделаю :)

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

Ответ 2

Есть несколько вещей, которые я бы изменил:

1. использовать flex вместо float
2. используйте ярлык для своей звезды вместо самого входа
3. удалить абсолютное позиционирование - он не нужен и может просто усложнить ситуацию
4. не смешивайте встроенные стили с css - лучше всего использовать все css (я не исправил это, хотя)

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

Ответ 3

Пожалуйста, добавьте position: relative; .group и соответствующим образом отрегулируйте положение звезды. проверьте ниже:

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

Ответ 4

в вашем .star:before и .star:after этого вам нужно установить position relative

Теперь он позволяет им находиться в том же положении, что и вход, который имеет star класс!

Теперь вы можете выровнять вход в нужном месте.

В этом случае вы можете добавить их в свои стили .star:

.star {
  position: relative;
  bottom: 12px;
  right: 15px;
}

И это будет то, что вы ищете

Это фрагмент:

.star {
  visibility: hidden;
  font-size: 30px;
  cursor: pointer;
  color: orange;
  position: relative;
  bottom: 12px;
  right: 12px;
}

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

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

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

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

Ответ 5

Я думаю, вы можете просто добавить верхний атрибут и очистить его позиционированием и дополнением, как показано ниже.

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

.star:before {
  content: "\2605";
  position: absolute;
  visibility: visible;
  top: 0;
  right: 10px;
}

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

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

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

Ответ 6

Немного незначительных обновлений для .star и .star:before классы будут исправлять проблему, ознакомьтесь с нижеприведенным фрагментом

.star {
  visibility: hidden;
  font-size: 30px;
  cursor: pointer;
  color: orange;
  position: relative;
  margin: 0;
  padding: 0;
}

.star:before {
  content: "\2605";
  position: absolute;
  visibility: visible;
  top: 0;
  right: 0;
  line-height: 1;
  font-size: 20px;
}

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

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

<div class="group text-truncate">
  <input type="checkbox" style="float:right;" class="group-checkbox star">
  <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>
</div>