Why elements aren't aligned after changing the checkbox? - html

Question

Here's the problem. My checkbox was default one and I changed it by deleting the default styles with: -webkit-appearance: none;. But what happened after, you can see in the fiddle.
Somewhy, it's isn't aligned anymore. Tried to use vertical-align: middle or text-align:center, but didn't helped.
Why did it even happened and how to fix it?
.more-dropdown-price {
float: right;
vertical-align: middle;
}
.more-dropdown-checkbox {
height: 18px;
width: 18px;
border: 1px solid #92aabb;
-webkit-appearance: none;
display: inline-block;
}
input[type=checkbox]:checked {
background-color: #3180D8;
}
.dropdown-items:hover {
background-color: #87CEFA;
}
<div class="more-dropdown">
<div class="dropdown-items">
<input type="checkbox" class="more-dropdown-checkbox"> Foo <span class="more-dropdown-price"> 155$ </span>
</div>
<div class="dropdown-items">
<input type="checkbox" class="more-dropdown-checkbox"> Bar <span class="more-dropdown-price"> 15$ </span>
</div>

Answer 1

I suggest adding the following to your .dropdown-item class:
.dropdown-item{
display: flex;
align-items: center;
}

Answer 2

Add vertical-align: middle; to input.
.more-dropdown-price {
float: right;
vertical-align: middle;
}
.more-dropdown-checkbox {
height: 18px;
width: 18px;
border: 1px solid #92aabb;
-webkit-appearance: none;
display: inline-block;
vertical-align: middle;
}
input[type=checkbox]:checked {
background-color: #3180D8;
}
.dropdown-items:hover {
background-color: #87CEFA;
}
<div class="more-dropdown">
<div class="dropdown-items">
<input type="checkbox" class="more-dropdown-checkbox"> Foo <span class="more-dropdown-price"> 155$ </span>
</div>
<div class="dropdown-items">
<input type="checkbox" class="more-dropdown-checkbox"> Bar <span class="more-dropdown-price"> 15$ </span>
</div>

Answer 3

try something like this:
.dropdown-items:hover {
background-color: #87CEFA;
display: flex;
align-items: center;
align-content: center;
}
But I think you should align to the left because the elements have different number of letters so they are never aligned