<div class="plans">
  <div class="plan-box">
    <div class="plan-options">
      <p class="plan-name">
        Personal
      </p>
      <div class="plan-price">
        <strong>Free</strong>
      </div>
       <ul class="plan-details">
         <li>1 sub-domain</li>
         <li><strong>10</strong> email addresses</li>
         <li><strong>Unlimited</strong> Bandwidth</li>
         <li><strong>20GB</strong> Storage</li>
         <li>Support Ads</li>
         <li>Shared Hosting</li>
         <li><strong>24/7</strong> Customer Support</li>
      </ul>
      
      <div class="element-hidden more-options">
        <a href="#">+ more options</a>
        <div class="element-hidden additional-options">
          <p>If you need more options, please consider our <a href="#">Premium</a> or <a href="#">Pro</a> plans.</p>
        </div>
      </div>
      
      <a class="button" href="#">Choose</a>
    </div>
  </div>
  
  <div class="plan-box">
    <div class="plan-options">
      <p class="plan-name">
        Premium
      </p>
      <div class="plan-price">
        <strong>$19</strong>/mo
      </div>
       <ul class="plan-details">
         <li><strong>FREE</strong> custom domain</li>
         <li><strong>Unlimited</strong> email addresses</li>
         <li><strong>Unlimited</strong> Bandwidth</li>
         <li><strong>100GB</strong> Storage</li>
         <li><strong>No Support Ads</strong></li>
         <li><strong>24/7</strong> Customer Support</li>
      </ul>
      
      <div class="element-hidden more-options">
        <a href="#">+ more options</a>
        <div class="element-hidden additional-options">
          <ul>
            <li><input type="checkbox" id="10gb" name="extragigs" /> <label for="10gb">10GB more storage</label></li>
          </ul>
        </div>
      </div>
      
      
      <!-- Hiding until I think of a better style
      <div class="best-choice">
          Voted Best Choice
      </div> -->
      
      <a class="button" href="#">Choose</a>
    </div>
  </div>
  
  <div class="plan-box">
    <div class="plan-options">
      <p class="plan-name">
        Pro
      </p>
      <div class="plan-price">
        <strong>$50</strong>/mo
      </div>
       <ul class="plan-details">
         <li><strong>FREE</strong> custom domain</li>
         <li><strong>Unlimited</strong> email addresses</li>
         <li><strong>Unlimited</strong> Bandwidth</li>
         <li><strong>200GB</strong> Storage</li>
         <li><strong>No Support Ads</strong></li>
         <li><strong>Quick Install</strong> Apps (WordPress, etc)</li>
         <li><strong>VPS Hosting</strong></li>
         <li><strong>24/7</strong> Customer Support</li>
      </ul>
      
      <div class="element-hidden more-options">
        <a href="#">+ more options</a>
        <div class="element-hidden additional-options">
          <ul>
            <li><input type="checkbox" id="10gb" name="extragigs" /> <label for="10gb">10GB more storage</label></li>
            <li><input type="checkbox" id="marketing" name="marketing" /> <label for="marketing">SEO and Marketing Monthly Evaluation</label></li>
          </ul>
        </div>
      </div>
      
      <a class="button" href="#">Choose</a>
    </div>
  </div>
</div>
@import "compass/css3";

$beige: #F7EDB7;
$dark-grey: #272F30;
$orange: #E0401C;
$red: #9E2B20;
$warm-white: #FFFCEF;
$light-blue: #D5FFFC;
$dull-blue: #437299;
$base-font: Oxygen, Arial, Helvetica, sans-serif;
$heading-font: Oswald, Arial, Helvetica, sans-serif;

* {
    box-sizing: border-box;
    transition: all 1s;
}

body {
  background: $beige;
  color: $dark-grey;
  font: 16px $base-font;
  font-weight: 300;
  padding: 50px 0;
}

ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.element-hidden {
  display: none;
}

.plan-name, .plan-price, .plan-details, .button, .more-options, .best-choice {
    padding: 10px;
 }

.plans {
  margin: 0 auto;
  max-width: 80%;
  display: flex;
  flex-flow: row wrap;
  position: relative;
  .plan-box {
    display: flex;
    width: 33.3333%;
    background: $warm-white;
    margin: 10px 0;
    min-height: 650px;
    .best-choice {
      background: $light-blue;
      text-transform: uppercase;
      font-weight: 600;
      color: $dull-blue;
      @include box-shadow(inset 0 -2px 3px rgba(0, 0, 0, .15), inset 0 2px 3px rgba(0, 0, 0, .15));
      margin-top: auto;
    }
    &:hover {
      margin-top: -15px;
      background: white;
      @media all and (max-width: 700px) {
        margin-top: 10px;
      }
      .button {
        //padding: 20px;
        //font-size: 30px;
      }
      .plan-name {
        color: black;
      }
      .plan-price {
        background: saturate($red, 55%);
        @include box-shadow(inset 0 -4px 3px rgba(0, 0, 0, .15), inset 0 4px 3px rgba(0, 0, 0, .15));
        text-align: center;
      }
      .more-options {
        display: block;
        padding: 20px;
        text-align: right;
        position: relative;
        .additional-options {
          position: relative;
          text-align: left;
          width: 100%;
          margin: 0;
        }
        a {
          color: $red;
          text-decoration: none;
        }
      }
    }
    @media all and (max-width: 700px) {   
      &:first-child {
        margin-bottom: 20px;
      }
    }
    &:last-child {
      //margin-right: 0;
    }
    &:nth-child(2) {
      margin-top: 0;
      @include box-shadow(-3px 0 3px rgba(0, 0, 0, .15), 3px 0 3px rgba(0, 0, 0, .15));
      position: relative;
      &:hover {
        margin-top: -35px;
        @media all and (max-width: 700px) {
          margin-top: 0px;
          marign-right: -30px;
        }
      }
    }
    @media all and (max-width: 700px) {
      width: 100%;
    }
  }
  .plan-name {
    font: 300 32px $heading-font;
    text-align: center;
    margin: 0;
    padding: 20px;
  }
  .plan-price {
    background: $red;
    color: white;
    display: flex;
    font: 24px $heading-font;
    padding: 20px 10px;
    text-align: center;
    strong {
      font-size: 34px;
      align-self: baseline;
      line-height: 1;
      font-weight: 500;
    }
  }
  .plan-options {
    display: flex;
    flex-flow: column;
    width: 100%;
    li {
      border-bottom: 1px solid #cdcdcd;
      padding: 5px 0;
      margin: 5px 0;
    }
    .button {
      margin-top: auto;
      display: block;
      background: $orange;
      color: white;
      text-align: center;
      font: 24px $heading-font;
      text-decoration: none;
      &:hover {
        background: saturate($orange, 10%);
      }
     }
   }
}
$('.more-options a').click(function(e) {
  $(this).next('.additional-options').slideToggle();
  e.preventDefault();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js