automatically adjust width of columns in a "table" using div's/CSS

I want to emulate a classic table using DIVs/CSS.
In order to make the columns line up, I seem to need to specify the widths, as opposed to using a table where the column-widths are calculated dynamically depending on the content.

I will be adding more rows all the time, so it is a pain to re-optimize the widths every time (also not optimal for users on small screens).

Is my best bet just to stick with an actual table, or is there a better way? I need something with broad support (browsers/phones/etc).

css:

.chart {
    background-color: green ;
    overflow: hidden ;
}
.row {
    margin-top: 5px ;
    margin-bottom: 5px ;
}
.row:after {
    clear: both ;
    content: "" ;
    display: block ;
}
.date {
    width: 3em ;
    float: left ;
}
.chap {
    width: 20em ;
    float: left ;
}
.cook {
    width: 25em ;
    float: left ;
}

html:

<p> looks like a table, but the column-widths are hard-coded, ugh.</p>
<div class=chart>
  <div class=row>
<div class=date><b>date</b></div>
<div class=chap><b>chap</b></div>
<div class=cook><b>cook</b></div>
  </div>
  <div class=row>
<div class=date>1 jan</div>
<div class=chap>intro</div>
<div class=cook>chocolate chip munchies galore</div>
  </div>
  <div class=row>
<div class=date>2 jan</div>
<div class=chap>a really big long chapter</div>
<div class=cook>none</div>
  </div>
</div>


You can use display table, table-row and table-cell

The proper way to to this is:

css:

th {
    text-align: left;
    height: 30%;
}

table {
    width: 100%;
}

html:

<table>
   <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
   </tr>
   <tr>
      <th>D</th>
      <th>E</th>
      <th>F</th>
   </tr>
</table>

To make it responsive wrap the table code inside the style below:

<div style="overflow-x:auto;">

<table>
</table>

</div>