I'm doing a PR on contrib-simpletime to add in checkboxes for the various properties - got it working but my CSS knowledge is basically look at someone else's code and copy/paste and I'm struggling to get the columns to align
Any got some time to get me started on the top two rows?
<div class="form-row">
<input type="checkbox" id="node-input-mydate" style="width:15px;">
<label for="node-input-mydate" style="width:50%; display:inline"> mydate e.g. "Tue Sep 11 2018"</label>
<span>    </span>
<input type="checkbox" id="node-input-myear" style="width:15px;">
<label for="node-input-myyear" style="width:30%; display:inline"> myyear e.g. "2018"</label>
</div>
<div class="form-row">
<input type="checkbox" id="node-input-mymonth" style="width:15px;">
<label for="node-input-mymonth" style="width:50%; display:inline"> mymonth e.g. "Sep"</label>
<span>    </span>
<input type="checkbox" id="node-input-mymonthn" style="width:15px;">
<label for="node-input-mymonthn" style="width:30%; display:inline"> mymonthn e.g. "09"</label>
</div>
I would probably do it similar to this one
<div style="display: flex;">
<div style="flex-grow: 1;">
<div class="form-row">
<input type="checkbox" id="node-input-mydate" style="width:15px;">
<label for="node-input-mydate" style="width:50%; display:inline"> mydate e.g. "Tue Sep 11 2018"</label>
</div>
<div class="form-row">
<input type="checkbox" id="node-input-mymonth" style="width:15px;">
<label for="node-input-mymonth" style="width:50%; display:inline"> mymonth e.g. "Sep"</label>
</div>
</div>
<div style="flex-grow: 1;">
<div class="form-row">
<input type="checkbox" id="node-input-myear" style="width:15px;">
<label for="node-input-myyear" style="width:30%; display:inline"> myyear e.g. "2018"</label>
</div>
<div class="form-row">
<input type="checkbox" id="node-input-mymonthn" style="width:15px;">
<label for="node-input-mymonthn" style="width:30%; display:inline"> mymonthn e.g. "09"</label>
</div>
</div>
</div>
But there might be better/simpler/more robust what ever solutions 
Edit: I just copied your "input" and "label" tags, you should remove/adjust their styles, since most of them are not necessary
But I seem to have taken a wrong turn 
It seems to (visually) fail as soon as I add in a third row 
<div style="display: flex;">
<div style="flex-grow: 1;">
<div class="form-row">
<input type="checkbox" id="node-input-mydate" style="width:15px;">
<label for="node-input-mydate" style="width:50%; display:inline"> mydate e.g. "Tue Sep 11 2018"</label>
</div>
<div class="form-row">
<input type="checkbox" id="node-input-mymonth" style="width:15px;">
<label for="node-input-mymonth" style="width:50%; display:inline"> mymonth e.g. "Sep"</label>
</div>
</div>
<div style="flex-grow: 1;">
<div class="form-row">
<input type="checkbox" id="node-input-myear" style="width:15px;">
<label for="node-input-myyear" style="width:30%; display:inline"> myyear e.g. "2018"</label>
</div>
<div class="form-row">
<input type="checkbox" id="node-input-mymonthn" style="width:15px;">
<label for="node-input-mymonthn" style="width:30%; display:inline"> mymonthn e.g. "09"</label>
</div>
</div>
<div style="flex-grow: 1;">
<div class="form-row">
<input type="checkbox" id="node-input-mydom" style="width:15px;">
<label for="node-input-mydom" style="width:30%; display:inline"> mydom e.g. "11"</label>
</div>
<div class="form-row">
<input type="checkbox" id="node-input-mydoy" style="width:15px;">
<label for="node-input-mydoy" style="width:30%; display:inline"> mydoy e.g. "86"</label>
</div>
</div>
</div>
you are adding a third column
The layout works by defining two coulmns (with the style flex-grow: 1).
<div style="display: flex;">
<div style="flex-grow: 1;">
<div class="form-row">
<input type="checkbox" id="node-input-mydate" style="width:15px;">
<label for="node-input-mydate" style="display:inline"> mydate e.g. "Tue Sep 11 2018"</label>
</div>
<div class="form-row">
<input type="checkbox" id="node-input-mymonth" style="width:15px;">
<label for="node-input-mymonth" style="display:inline"> mymonth e.g. "Sep"</label>
</div>
<div class="form-row">
<input type="checkbox" id="node-input-mydom" style="width:15px;">
<label for="node-input-mydom" style="display:inline"> mydom e.g. "11"</label>
</div>
</div>
<div style="flex-grow: 1;">
<div class="form-row">
<input type="checkbox" id="node-input-myear" style="width:15px;">
<label for="node-input-myyear" style="display:inline"> myyear e.g. "2018"</label>
</div>
<div class="form-row">
<input type="checkbox" id="node-input-mymonthn" style="width:15px;">
<label for="node-input-mymonthn" style="display:inline"> mymonthn e.g. "09"</label>
</div>
<div class="form-row">
<input type="checkbox" id="node-input-mydoy" style="width:15px;">
<label for="node-input-mydoy" style="display:inline"> mydoy e.g. "86"</label>
</div>
</div>
</div>
If you want to understand what is going on, read https://css-tricks.com/snippets/css/a-guide-to-flexbox/
One step forward, one step back
then even further back
I need to walk away from this for a while and come back later after I've done some ironing!
are you sure you copied my example? Because I just tested it and it works fine?
Just shows what a bit of ironing can achieve...
...and also just following instructions to the letter instead of improvising
