"display: table-cell" has no constistent alignment

Question

Once between the div tags, an HTML tag (eg headings, breaks), the contents are no longer align the same. Example: Html.DisplayFor (...) should end always justified. How can this be fixed?

<div class="table">
    <div class="row">
        <div class="cell">
            <h3>Heading 1</h3>
            <hr />
            <div class="row">
                <div class="cell">Label 1</div>
                <div class="cell">Html.DisplayFor(...)</div>
            </div>
            <div class="row">
                <div class="cell">Label 2 with much more Text</div>
                <div class="cell">Html.DisplayFor(...)</div>
            </div>
            <br />
            <h3>Heading 2</h3>
            <hr />
            <div class="row">
                <div class="cell">Label 3 with Text</div>
                <div class="cell">Html.TextBoxFor(...)</div>
            </div>           
        </div>
        <div class="cell">
            ...
        </div>
    </div>
</div>

CSS:

div .table {
    display: table;
    width: 100%;
}

div .cell {
    display: table-cell;
    padding: 0.3em;
}

div .row {
    display: table-row;
}

It should actually look more like this (red line):

Answer 1

Its because you break the flow of the layout by not adhering to only using a table->row/cell structure but by injecting div and hr elements in the middle of it.

You could simply add a width to the first column:

.row .cell .row .cell:first-child{
    width:200px;
}

Demo Fiddle