CSS flexbox adds random spacing between elements - html

Question

I have a problem. I want to use a animated checkbox and tried adding it to my code. The first problem I have is that the checkbox was floating a row above the <p> tag. For that I tried to create a flexbox with align-items: center;, but that results in a row that is aligned for some reason to the right side and the checkbox is still not at the same height as the <p> tag.
Here is the code snippet:
._checkbox
{
display: none;
}
label
{
width: 20px;
height: 20px;
margin: 0 auto;
background-color: #3f97fc;
transform: translateY(-50%);
border-radius: 50%;
cursor: pointer;
transition: 0.2s ease transform, 0.2s ease background-color, 0.2s;
overflow: hidden;
z-index: 1;
}
label:before
{
content: "";
position: absolute;
top: 50%;
right: .5%;
left: 0;
width: 15px;
height: 15px;
margin: 0 auto;
background-color: #fff;
transform: translateY(-50%);
border-radius: 50%;
transition: 0.2s ease width, 0.2s ease height;
}
#tick_mark
{
position: absolute;
top: 3px;
right: 0;
left: -11px;
width: 12px;
height: 10px;
margin: 0 auto;
margin-left: 14px;
transform: rotateZ(-40deg);
}
#tick_mark:before, #tick_mark:after
{
content: "";
position: absolute;
background-color: #fff;
border-radius: 2px;
opacity: 0;
transition: 0.2s ease transform, 0.2s ease opacity;
}
#tick_mark:before
{
left: 0;
bottom: 0;
width: 3px;
height: 8px;
transform: translateY(-68px)
}
#tick_mark:after
{
left: 0;
bottom: 0;
width: 100%;
height: 3px;
transform: translateX(78px)
}
._checkbox:checked + label
{
background-color: #07d410;
}
._checkbox:checked + label:before
{
width: 0;
height: 0;
}
._checkbox:checked + label #tick_mark:before, ._checkbox:checked + label #tick_mark:after
{
transform: translate(0);
opacity: 1;
}
.checkbox_container
{
display: flex;
align-items: center;
space-between: 0px
}
.teskt {
padding: 0px;
}
<div class="option 0, checkbox_container"><input type="checkbox" id="Air Quality" class="_checkbox"><label for="Air Quality"><div id="tick_mark"></div></label><p class="tekst"> Air Quality - 7 Project(s)</p></div>
So just to be clear... I want the checkbox next to the <p> tag and the height of them needs to be on the same level. Also, the content needs to be aligned to the right side!
Can someone tell me how to achieve this?

Answer 1

Everything aligned to left, vertically on the same level, like this?
I removed transform from label, not sure why you had it there and set it to position relative and replaced margin with margin right for spacing. On the flex container I updated it to
.checkbox_container {
display: flex;
align-items: center; // vertically centers flex items
}
._checkbox {
display: none;
}
label {
width: 20px;
height: 20px;
background-color: #3f97fc;
position: relative;
border-radius: 50%;
cursor: pointer;
transition: 0.2s ease transform, 0.2s ease background-color, 0.2s;
overflow: hidden;
z-index: 1;
margin-right: 10px;
}
label:before {
content: "";
position: absolute;
top: 50%;
right: .5%;
left: 0;
width: 15px;
height: 15px;
margin: 0 auto;
background-color: #fff;
transform: translateY(-50%);
border-radius: 50%;
transition: 0.2s ease width, 0.2s ease height;
}
#tick_mark {
position: absolute;
top: 3px;
right: 0;
left: -11px;
width: 12px;
height: 10px;
margin: 0 auto;
margin-left: 14px;
transform: rotateZ(-40deg);
}
#tick_mark:before,
#tick_mark:after {
content: "";
position: absolute;
background-color: #fff;
border-radius: 2px;
opacity: 0;
transition: 0.2s ease transform, 0.2s ease opacity;
}
#tick_mark:before {
left: 0;
bottom: 0;
width: 3px;
height: 8px;
transform: translateY(-68px)
}
#tick_mark:after {
left: 0;
bottom: 0;
width: 100%;
height: 3px;
transform: translateX(78px)
}
._checkbox:checked+label {
background-color: #07d410;
}
._checkbox:checked+label:before {
width: 0;
height: 0;
}
._checkbox:checked+label #tick_mark:before,
._checkbox:checked+label #tick_mark:after {
transform: translate(0);
opacity: 1;
}
.checkbox_container {
display: flex;
align-items: center;
}
.teskt {
padding: 0px;
}
<div class="option 0, checkbox_container">
<input type="checkbox" id="Air Quality" class="_checkbox">
<label for="Air Quality">
<span id="tick_mark"></span>
</label>
<p class="tekst"> Air Quality - 7 Project(s)</p>
</div>