title: How to organize div to look like a table?
body: <p>I have form with multiple input fields and I would like to organize them like this:</p>
  
  <p><a href="https://jsfiddle.net/dmilos89/58ea82gj/2/" rel="nofollow noreferrer">https://jsfiddle.net/dmilos89/58ea82gj/2/</a></p>
  
  <p>Layout above used table structure. I'm creating from layout and all of these above I would need to create using div. Here is what I have so far:</p>
  
  <pre><code>&lt;div class="formItem"&gt;
      &lt;div class="frRow"&gt;
          &lt;div class="frCell"&gt;
              &lt;span&gt;Results&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="frRow"&gt;
          &lt;div class="frCell"&gt;
              &lt;span&gt;Ear&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="frCell"&gt;
              &lt;span&gt;250&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="frCell"&gt;
              &lt;span&gt;500&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="frCell"&gt;
              &lt;span&gt;750&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="frCell"&gt;
              &lt;span&gt;1000&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="frCell"&gt;
              &lt;span&gt;1500&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="frCell"&gt;
              &lt;span&gt;2000&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="frCell"&gt;
              &lt;span&gt;3000&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="frCell"&gt;
              &lt;span&gt;4000&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="frCell"&gt;
              &lt;span&gt;6000&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="frCell"&gt;
              &lt;span&gt;8000&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="frRow"&gt;
          &lt;div class="frCell"&gt;
              &lt;span&gt;SRT&lt;br&gt;SAT&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="frCell"&gt;
              &lt;span&gt;Recognition&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My div structure is still far away from desired layout. I have used css display-table on each div element. Here is CSS:</p>
  
  <pre><code>div.frRow {
      margin: 5px;
      display: table;
  }
  div.frCell {
      display: table-cell;
      padding: 5px;
  }
  div.frCell span {
      font-weight: bold;
      margin-right: 5px;
  }
  </code></pre>
  
  <p>I'm not sure if this is the best way to layout this type of form fields. Please let me know how I can get desired layout or if there is better way to do this. Thank you.</p>