I'm currently working on a form that has multiple input fields, and I'm looking to structure them in a specific way. The layout I want to achieve can be seen in this example:
https://jsfiddle.net/dmilos89/58ea82gj/2/
The example above utilizes a table structure, but I would like to achieve the same result using div elements. So far, this is what I have:
<div class="formItem">
<div class="frRow">
<div class="frCell">
<span>Results</span>
</div>
</div>
<div class="frRow">
...
</div>
<div class="frRow">
...
</div>
...
</div>
Although I have made progress with my div structure, it's still not exactly what I'm aiming for. I've utilized CSS display properties to mimic the table structure. Here is the CSS I'm using:
div.frRow {
margin: 5px;
display: table;
}
div.frCell {
display: table-cell;
padding: 5px;
}
div.frCell span {
font-weight: bold;
margin-right: 5px;
}
I'm unsure if this is the most effective way to layout my form fields in this manner. I would appreciate any feedback on how I can achieve the desired layout or if there's a better approach to accomplish this. Thank you.