The data you are using doesn't look like tabular, but there are various ways to achieve the above. You can simple use a list and spans to align. So instead of using this
<div class="table-row">
<div class="table-cell">
<label>Label Three pushes this table</label>
</div>
<div class="table-cell">
<input type="text">
</div>
</div>
</div>
You can use
<ul>
<li>
<label>Hello</label>
<input type="text" />
</li>
<li>
<label>Hello</label>
<input type="text" />
</li>
<!-- Some more li elements here -->
</ul>
Demo(Looks pretty neat)
You can also use the below CSS to control the element spacings
label {
display: inline-block;
margin-right: 5px;
}
ul li {
margin-top: 10px;
}
Still if you want to stick to tabular layout, I would suggest you to use table
element here instead of using a whole lot of html and classes for a single cell
.
For example
<div class="table-row">
<div class="table-cell">
<label>Label Two</label>
</div>
<div class="table-cell">
<input type="text">
</div>
</div>
Can be simply written as (Feels lot cleaner)
<tr>
<td></td>
</tr>
Some CSS optimization...
If you want to target the div
which is a direct child to .table
you can use
.table > div {
/* This way you can remove all classes with name table-row */
}
To target the cells, you can remove table-cell
class and use
.table > div > div {
/* This way you can remove all classes with name table-cell*/
}