How to Evenly Space Checkboxes, Even When Page is Resized - checkbox

Question

Thanks in advance for your help.
I need to ensure even vertical spacing between DIVS containing a checkbox + a labels inside a form -- even when the page is resized. The problem I'm having is that the labels are different lengths, so when the page is resized, the spacing between the DIVS is consistent, but I want the spacing to be even between the end of one label (which may be up to 3 lines long), and the start of the next.
I was reading about flexbox, and hoped this would be an appropriate method to handle. But it's not working as I expected, perhaps because I'm doing it wrong. Or perhaps because I'm using the checkbox hack for custom checkboxes, and that is interfering?
Here's my code:
CSS:
/* CUSTOM CHECKBOX CONTROLS */
input[type=checkbox].css-checkbox {
position:absolute;
z-index:-1000;
left:-1000px;
overflow: hidden;
clip: rect(0 0 0 0);
height:1px;
width:1px;
margin:-1px;
padding:0;
border:0;
}
input[type=checkbox].css-checkbox + label.css-label, input[type=checkbox].css-checkbox + label.css-label.clr {
padding-left:19px;
height:14px;
display:inline-block;
line-height:14px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:16px;
vertical-align:middle;
cursor:pointer;
}
input[type=checkbox].css-checkbox:checked + label.css-label, input[type=checkbox].css-checkbox + label.css-label.chk {
background-position: 0 -14px;
}
label.css-label {
background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_15092a7494cee0a8cdfe5f1e21e1e816.png);
-webkit-touch-callout: none; 212 247 8100
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* FLEXBOX CONTROLS */
.flex-container {
display:flex;
flex-direction:column;
height:450px;
align-items:baseline;
}
.flex-item {
margin:auto;
margin-left:0px;
flex-basis:0;
flex-shrink:1;
height:auto;
min-height:50px;
}
HTML:
<div class="flex-container">
<div class="flex-item"><input type="checkbox" name="checkboxG4" id="checkboxG4" class="css-checkbox" />
<label for="checkboxG4" class="css-label radGroup1"><p>News, Commentary, Research & Special Reports</p></label>
</div>
<div class="flex-item"><input type="checkbox" name="checkboxG5" id="checkboxG5" class="css-checkbox" />
<label for="checkboxG5" class="css-label radGroup1"><p>Get General Research that includes periodic Special Reports sent when a landmark market event occurs.</p></label>
</div>
</div>

Answer 1

sorry if this is answer is late but maybe this can still help you. Looking at the JFiddle link you provided here: Your JFiddle, the reason this is not working is because you have set the height of your labels to a fixed height of 14px (to work with the checkbox feature you implemented). You correctly set justify-content: space-around to do what you described, but if the content is always 14px regardless of how many lines it spans, then the space will remain the same no matter what. Since your checkbox feature requires this 14px height, you should instead apply this checkbox feature to a div nested inside the label, with the accompanying text outside this div, but still inside the label. Here is a JFiddle with the code I implemented to get this working.
The main HTML change is this:
<label for="checkboxG4" class="radGroup1">
<div class="css-label"></div>
<span>News, Commentary, Research & Special Reports</span>
</label>
instead of:
<label for="checkboxG4" class="css-label radGroup1">
<p>News, Commentary, Research & Special Reports</p>
</label>
and CSS changed to:
input[type=checkbox].css-checkbox + label div.css-label,
input[type=checkbox].css-checkbox + label div.css-label.clr {}
label div.css-label {}
instead of:
input[type=checkbox].css-checkbox + label.css-label,
input[type=checkbox].css-checkbox + label.css-label.clr {}
label.css-label {}