pricing table Flexbox

by marusti

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="flexcontainer">
  <div>

    <h3 class="price-header basic">
Basic<br>         
            <small>€120 / Jahr</small> 
</h3>


    <ul class="fa-ul">
      <li><i class="fa-li fa fa-check green" aria-hidden="true"></i> Backup der Webseite (inklusive Datenbank)
      </li>
      <li><i class="fa-li fa fa-check green" aria-hidden="true"></i> Installation der Joomla! Updates bei Erscheinen
      </li>
      <li><i class="fa-li fa fa-times red" aria-hidden="true"></i> Monatliche Aktualisierung von Erweiterungen
      </li>
      <li><i class="fa-li fa fa-check green" aria-hidden="true"></i> Funktions-Check der Website nach jedem Update
      </li>
    </ul>
    <a class="price-footer" href="#">
      Order Now
    </a>
  </div>
  <div>
    <h3 class="price-header plus">
Plus<br>         
            <small>€240 / Jahr</small>
</h3>

    <ul class="fa-ul">
      <li><i class="fa-li fa fa-check green" aria-hidden="true"></i> Backup der Webseite (inklusive Datenbank)
      </li>
      <li><i class="fa-li fa fa-check green" aria-hidden="true"></i> Installation der Joomla! Updates bei Erscheinen
      </li>
      <li><i class="fa-li fa fa-check green" aria-hidden="true"></i> Monatliche Aktualisierung von Erweiterungen
      </li>
      <li><i class="fa-li fa fa-check green" aria-hidden="true"></i> Funktions-Check der Website nach jedem Update
      </li>
    </ul>
    <p class="price-footer">
      Order Now
    </p>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0
}

body {
  background: #fff
}

.flexcontainer {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  padding: 1em
}

.flexcontainer > div {
  flex: 1;
  margin: 0 1em;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.price-header {
  text-align: center;
  padding: .5em;
  border-bottom: 1px solid #ddd
}

.basic {
  background: #f5f5f5
}

.plus {
  background: #3c8dc5;
  color: #fff
}

.fa-ul {
  padding: .5em
}

.price-footer {
  display: block;
  text-decoration: none;
  border-top: 1px solid #ddd;
  text-align: center;
  padding: .5em;
  background: #f5f5f5;
  color: #000
}

.price-footer:hover {
  background-color: #fff
}

.green {
  color: lightgreen
}

.red {
  color: red
}