Cannot add element in the same line - html

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:
use flex instead of float
use a label for your star instead of the input itself
remove the absolute positioning - it's not needed and can just complicate things
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>

Answer 4

in your .star:before and .star:after, you need to set the position to relative
Now it let's them to be in the same position as the input that has star class itself!
Now you can align the input to be in the right place.
In that case, you can add these to your .star styles:
.star {
position: relative;
bottom: 12px;
right: 15px;
}
And it will be what you're looking for
This is the snippet:
.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>

Answer 5

I think you can just add a top attribute and clean it up with positioning and padding like below.
.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>

Answer 6

Few minor updates to the .star and .star:before classes will fix the issue, please have a look at the below-working snippet
.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>