<div class="flex-container">
  <div class="flex-item">
    <ul class="package">
      <li class="header">Basic</li>
      <li class="gray">$ 20/month</li>
      <li>20GB Storage</li>
      <li>100 Domains</li>
      <li>1TB Bandwidth</li>
      <li>1000 Email Boxes</li>
      <li class="gray">
        <button>Add to Cart</button>
      </li>
    </ul>
  </div>
  <div class="flex-item">
    <ul class="package">
      <li class="header highlight">Pro</li>  
      <li class="gray">$ 30/month</li>
      <li>100GB Storage</li>
      <li>500 Domains</li>
      <li>2TB Bandwidth</li>
      <li>1000 Email Boxes</li>
      <li class="gray">
        <button>Add to Cart</button>
      </li>
    </ul>
  </div>
  <div class="flex-item">
   <ul class="package">
      <li class="header">Premium</li>
      <li class="gray">$ 60/month</li>
      <li>250GB Storage</li>
      <li>500 Domains</li>
      <li>5TB Bandwidth</li>
      <li>1000 Email Boxes</li>
      <li class="gray">
        <button>Add to Cart</button>
      </li>
    </ul>
  </div>
</div>
* {
  box-sizing: border-box;
  font-family: -apple-system, 
    BlinkMacSystemFont, 
    "Segoe UI", 
    Roboto, 
    Oxygen-Sans, 
    Ubuntu, 
    Cantarell, 
    "Helvetica Neue", 
    sans-serif;
  margin: 0;
  padding: 0;
}

.flex-container {
  display: flex;
  padding: 1em;
}

.flex-item {
  flex: 1;
  width: 0;
}

.flex-item:not(:last-child) {
  margin-right: 1em;
}

.package {
  border: 1px solid #eee;
  list-style-type: none;
  margin: 0;
  padding: 0;
  transition: 0.25s;
}

.package:hover {
  box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
  transform: scale(1.025);
}

.package .header {
  background-color: #333;
  color: #fff;
  font-size: 1.5em;
}

.package .highlight {
  background-color: #29b6f6;
}

.package li {
  background-color: #fff;
  border-bottom: 1px solid #eee;
  padding: 1.2em;
  text-align: center;
}

.package .gray {
  background-color: #eee;
  font-size: 1.25em;
}

button {
  background-color: #29b6f6;
  border: none;
  border-radius: .15em;
  color: #fff;
  cursor: pointer;
  padding: .75em 1.5em;
  font-size: 1em;
}

@media only screen and (max-width: 700px) {
  button {
    padding: .75em;
  }
}

@media only screen and (max-width: 600px) {
  .flex-container {
    flex-wrap: wrap;
  }

  .flex-item {
    flex: 0 0 100%;
    margin-bottom: 1em;
    width: 100%;
  }

  .package:hover {
    box-shadow: none;
    transform: none;
  }

  button {
    padding: .75em 1.5em;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.