Dynamic pricing table/feature matrix with HTML/CSS

Question

I am working on building out a pricing table/feature matrix (picture of what I am trying to build below)

I have the base built out, but I am running into trouble with the price rollups at the bottom, specifically for the 'Entrepreneur' and 'Business Pro' columns.

I want to be able to add new rows (new features) onto this and have the bottom prices adjust (move downwards) accordingly. Right now I am using relative positioning, which isn't going to work since I would need to adjust it every time a new feature/row is added.

Codepen Link: http://codepen.io/er40/pen/NxeZpq

.box {
  width: 1100px;
  margin: 50px auto;
}
/* Services Col */

.services-table {
  float: left;
  margin-top: 114px;
  z-index: 0;
  margin-right: 5px;
}
.services-table tr {
  height: 40px;
  background: #fff;
  border-bottom: 1px solid #f4f4f4;
}
.services-table tr:last-child {
  border-bottom: none;
}
.services-table th.services {
  color: #707478;
  font-weight: 100;
  min-width: 375px;
  background: #fff;
}
/* Entrepreneur and Business Pro Col */

table.price-matrix {
  -webkit-box-shadow: 0 0 16px 0 rgba(0, 0, 0, .07);
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, .07);
  float: left;
}
table.price-matrix tr {
  height: 40px;
  background: #fff;
}
/* Headers */

table.price-matrix th.header-white {
  color: #707478;
  font-weight: 100;
  font-size: 30px;
  min-width: 230px;
  text-align: center;
  padding: 15px 0;
  background: #fff;
}
table.price-matrix th.header-white:first-child {
  border-right: 1px solid #e3e3e3;
}
th.header-white hr,
th.header-green hr {
  width: 70%;
  border-bottom: 1px solid;
}
/* Rows */

tr:nth-child(even) td {
  background: #f7fafb;
}
tr:nth-child(even) td.td-green {
  background: #489a5a;
}
tr:nth-child(odd) td.td-green {
  background: #54aa66;
}
td.border {
  border-right: 1px solid #e3e3e3;
}
/* Enterprise */

.enterprise {
  float: left;
  -webkit-box-shadow: 0 0 16px 0 rgba(0, 0, 0, .21);
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, .21);
  margin-top: -20px;
}
.enterprise tr {
  height: 40px;
}
th.header-green {
  color: #fff;
  font-weight: 100;
  font-size: 30px;
  min-width: 230px;
  text-align: center;
  padding: 35px 0 15px;
  background: #54aa66;
}
.enterprise tr.price {
  height: 100px;
}
.enterprise tr.price-border {
  height: 10px;
}
span {
  display: inline-block;
  text-align: center;
  width: 230px;
  position: relative;
  left: 380px;
  bottom: 110px;
  font-size: 60px;
}

<section id="pakete">
  <div class="box">
    <!-- The surrounding box -->

    <!-- The front container -->
    <div class="front">
      <table class="services-table">
        <tr>
          <th class="services">Service 1</th>
        </tr>
        <tr>
          <th class="services">Service 1</th>
        </tr>
        <tr>
          <th class="services">Service 1</th>
        </tr>
        <tr>
          <th class="services">Service 1</th>
        </tr>
        <tr>
          <th class="services">Service 1</th>
        </tr>
        <tr>
          <th class="services">Service 1</th>
        </tr>
        <tr>
          <th class="services">Service 1</th>
        </tr>
        <tr>
          <th class="services">Service 1</th>
        </tr>
      </table>
      <table class="price-matrix" border="0">
        <tr>
          <th class="header-white">Entrepreneur
            <hr />
          </th>
          <th class="header-white">Business Pro
            <hr />
          </th>
        </tr>
        <tr>
          <td class="border"></td>
          <td></td>
        </tr>
        <tr>
          <td class="border"></td>
          <td></td>
        </tr>
        <tr>
          <td class="border"></td>
          <td></td>
        </tr>
        <tr>
          <td class="border"></td>
          <td></td>
        </tr>
        <tr>
          <td class="border"></td>
          <td></td>
        </tr>

        <tr>
          <td class="border"></td>
          <td class="entypo-cancel"></td>
        </tr>
        <tr>
          <td class="border"></td>
          <td></td>
        </tr>
        <tr>
          <td class="border"></td>
          <td></td>
        </tr>
      </table>
      <table class="enterprise">
        <th class="header-green">Enterprise
          <hr />
        </th>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr>
          <td class="td-green"></td>
        </tr>
        <tr class="price">
          <td class="td-green"></td>
        </tr>
        <tr class="price-border">
          <td class="td-green"></td>
        </tr>
      </table>
      <span>19</span>
    </div>
</section>

Answer 1

There are many more solutions for this UI, but according to me, this is the quickest/standardised way to achieve this. This layout is also responsive as well.

Note: I have used many :not Selectors to avoid inheritance.

function priceTable() {
  var whiteLeft = $('.white-left').innerWidth(),
    greenWidth = $('.green-width').innerWidth(),
    whiteHeight = $('.price').innerHeight();

  $('.bg-white').css({
    'left': whiteLeft,
    'bottom': whiteHeight
  });

  $('.bg-green').css({
    'width': greenWidth
  });
};

$(document).ready(priceTable);
$(window).on('resize load', priceTable);

body {
  background: #f1f1f1;
  font: 13px/16px sans-serif;
}
.main {
  position: relative;
}
.main .bg-white,
.main .bg-green {
  position: absolute;
  right: 0;
}
.main .bg-white {
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  top: 20px;
}
.main .bg-green {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  top: 0;
  bottom: 0;
}
.price-table {
  width: 100%;
  border-collapse: collapse;
  position: relative;
  z-index: 9;
}
.price-table .min {
  height: 10px;
  padding: 5px;
}
.price-table tr:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.price-table tr:nth-child(2n) td:not(:first-child,
:last-child,
.price) {
  background: rgba(0, 0, 0, 0.02);
}
.price-table tr:nth-child(2n) td:last-child {
  background: #428c52;
}
.price-table tr td {
  padding: 20px;
}
.price-table tr td:not(:first-child) {
  text-align: center;
}
.price-table tr td:last-child {
  background: #489a5a;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
  <span class="bg-white"></span>
  <span class="bg-green"></span>
  <table class="price-table">
    <thead>
      <tr>
        <td class="min" colspan="3"></td>
        <td class="min"></td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="white-left">&nbsp;</td>
        <td>Entrepreneur</td>
        <td>Business Pro</td>
        <td class="green-width">Enterprise</td>
      </tr>
      <tr>
        <td>Service 1</td>
        <td>yes</td>
        <td>yes</td>
        <td>yes</td>
      </tr>
      <tr>
        <td>Service 2</td>
        <td>yes</td>
        <td>yes</td>
        <td>yes</td>
      </tr>
      <tr>
        <td>Service 3</td>
        <td>yes</td>
        <td>yes</td>
        <td>yes</td>
      </tr>
      <tr>
        <td>Service 4</td>
        <td>yes</td>
        <td>yes</td>
        <td>yes</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td class="price">$19/month</td>
        <td class="price">$19/month</td>
        <td>$19/month</td>
      </tr>
    </tbody>
  </table>
</div>