Vertically align text next to checkbox - html

Question

I'm trying to put a checkbox with some text next to it to explain what the checkbox does. I want to make both their position absolute since their wrapper div has other things inside.
Although I put both of their top to the same value the checkbox appears to be higher up than the text.
I made a jsfiddle to explain what I mean: https://jsfiddle.net/9jx5t4xL/.
Should I just set the top of the checkbox a bit bigger than the text or is there a better way to align them vertically?

Answer 1

Using position and with % values wont be a good option instead of that you can use awesome flexbox layouts to easily achieve that as:
Code Snippet:
#wrapper {
height: 200px;
width: 250px;
border: 1px solid red;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
min-height: 24em;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
label {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
}
input {
margin: 0;
vertical-align: middle;
}
<div id="wrapper">
<label>Caption for input
<input type="checkbox" />
</label>
</div>

Answer 2

change your css of
p{
position: absolute;
top: 40%;
display: inline-block;
left: 5%;
}
#wrapper {
height: 200px;
width: 250px;
border: 1px solid red;
position: relative;
}
p{
position: absolute;
top: 40%;
display: inline-block;
left: 5%;
}
input{
position: absolute;
top: 50%;
display: inline-block;
left: 70%;
}
<div id="wrapper">
<p>Caption for input</p>
<input type="checkbox"/>
</div>