Q:

HTML/CSS display-table for form layout

Wokring on the flexible HTML/CSS layout, where you just add form, row, cell label, cell input classes - and it handles everything (width, vertical align, etc.).
I've choses to use display: table and its children table-row, table-cell - since it handles most of the issue smoothly without need the need of hacks. The goal is to have something like this (where I can just put 2 containers inside a cell and they will automatically have 50% width, or 33% for 3 containers, or 25% for 4, etc.):

The problem I've encountered is that tables inside a table-cell jump off the border:

Any suggestion how to fix this?

EDIT: JSFiddle example: https://jsfiddle.net/3gcnaetx/1/

A:

I would suggest using bootstrap for this since bootstrap provides a grid to solve this kind of issues. If you would like to make an own css for this you can look at the idea in my snippet. I don't know if it solves your issue, but I hope it will help you forward.
CSS & HTML Snippet:

*{
    box-sizing: border-box; 
}
.formrow:after, .col-2:after{
    display: table;
    content: " ";
    clear: both;
}
.col-2 {
    border: 1px dashed black;
    height: 100%;
    padding: 5px;
    width: 50%;
    min-width: 200px;
    float: left;
}
label {
    float: left;
    padding-right: 10px;
}
<div class="form">
    <form>
        <div class="formrow">
            <div class="col-2"><label for="input1">Label</label></div>
            <div class="col-2"><input id="input1"></input></div>
        </div>
        <div class="formrow">
            <div class="col-2"><label for="input2">Even longer label</label></div>
            <div class="col-2"><input id="input2"></input></div>
        </div>
        <div class="formrow">
            <div class="col-2">
                <label for="input3">Label</label>
                <input id="input3"></input>
            </div>
            <div class="col-2">
                <label for="input4">Label</label>
                <input id="input4"></input>
            </div>
        </div>
    </form>
</div>

