JSFiddle - React, Tailwind, and code Playground

HTML

<div class="list simple_list">
  <div class="overflow_list details">
    <div class="overhead">
      <table class="full_table">
        <caption class="caption">
          <p>
            <b>Details</b>
          </p>
        </caption>
        <thead class="thead">
          <tr>
            <th class="code th">
              <div class="pad">Reference</div>
            </th>
            <th class="name grow th">
              <div class="pad">Name</div>
            </th>
            <th class="base_price th">
              <div class="pad">Base ($)</div>
            </th>
            <th class="unit th">
              <div class="pad">Units </div>
            </th>
            <th class="subtotal th">
              <div class="pad">Total ($)</div>
            </th>
            <th class="overfix"> </th>
          </tr>
        </thead>
      </table>
    </div>
    <div class="overbody">
      <table class="firstc full_table">
        <tbody class="tbody">
          <tr class="firstr">
            <td class="code th">
              <p>440148</p>
            </td>
            <td class="text grow th">
              <p>Product 1</p>
            </td>
            <td class="th">
              <p>29.9</p>
            </td>
            <td class="th">
              <p>1</p>
            </td>
            <td class="th">
              <p>29.90</p>
            </td>
          </tr>
          <tr class="odd">
            <td>
              <p>100614</p>
            </td>
            <td class="text">
              <p>Product 2</p>
            </td>
            <td>
              <p>0.99</p>
            </td>
            <td>
              <p>2</p>
            </td>
            <td>
              <p>1.98</p>
            </td>
          </tr>
          <tr>
            <td>
              <p>101702</p>
            </td>
            <td class="text">
              <p>Product 3</p>
            </td>
            <td>
              <p>0.99</p>
            </td>
           ...

CSS

.list{width:35em} /*<-- play width this width*/

html{font-size:12px}
table{table-layout:auto;width:auto;white-space:nowrap;border-collapse:collapse;font-size:1em}
td{vertical-align:middle}
th{font-weight:normal;text-align:left;overflow:hidden}
.caption{padding:.25em .4em;text-align:left}
.th .pad{padding:.3em .45em}
.full_table{table-layout:fixed;width:100%;_width:auto}
table p{margin-bottom:0;line-height:1.667em}
table .btn p{line-height:inherit}
.grow p{overflow:hidden;text-overflow:ellipsis}
table .money{text-align:right}

.list{margin-bottom:15px;float:left;display:inline}
.list tr{background-color:#fff}
.list td,.list th{border:1px solid #aaa;border-left-width:0}
.list td{border-color:#ccc;padding:.5em 0;border-width:0 1px 0 0}
.list th{background-color:#dbdbdb;text-shadow:0 1px 0 #fff}
.list .lastr td{border-bottom-width:1px}
.list .firstc{border-left-width:1px;border-style:solid}
.list td{vertical-align:top}
.list td.text{overflow:hidden}
.list p{margin:0 .5em}
.list .odd{background-color:#f3f7fd}

.overflow_list .overbody{overflow:scroll;overflow-x:hidden;*padding-right:17px;_padding-right:0}
.overflow_list .overfix{width:16px;*width:17px;_width:16px}
@media screen and (-webkit-min-device-pixel-ratio:0){.overflow_list .overfix{width:17px}}

/*personalized list*/
.simple_list .overhead,.simple_list .overbody{border:2px solid #8badc6}
.simple_list .overhead .overbody{border-width:2px 0}
.simple_list .overhead{border-bottom-width:0}
.simple_list .overbody{border-top-width:0;background-color:#ccc}
.simple_list .firstr p{margin:0;padding:0.5em;border-top:1px solid #ddd}
.simple_list .firstc{border-width:0 1px 1px 0;border-color:#b7b7b7;padding:0}
.simple_list .tbody .firstc{border-color:#aaa;border-top-width:0}
.simple_list td,.simple_list th{border-width:0;border-left-width:1px}
.simple_list .clean td,.simple_list .clean th{border-width:0}
.simple_list th{border-top-width:1px;border-bottom-width:1px}
.simple_list...