подскажите пожалуйста как сверстать данный элемент

body {
  background: #f5f5f5;
}

.pricing_options {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-end;
  width: 100%;
  max-width: calc(200px * 3 + 30px);
  margin: 0 auto;
}

.pricing_options .item {
  display: block;
  width: 100%;
  max-width: 200px;
  text-align: center;
}

.pricing_options .item:not(:last-child) {
  margin-right: 15px;
}

.pricing_options .item .top {
  background: #333;
  color: #fff;
}

.pricing_options .item .top > div {
  padding: 5px 10px;
  box-sizing: border-box;
}

.pricing_options .item .top .title {
  font-size: 110%;
  font-weight: bold;
}

.pricing_options .item .top .price {
  font-size: 200%;
  font-weight: bold;
  border: 1px solid #666;
  border-left: 0;
  border-right: 0;
}

.pricing_options .item .top .price.-dollar::before {
  content: '$';
}

.pricing_options .item .top .price::before {
  display: inline;
  font-size: 50%;
}

.pricing_options .item .top .desc {
  color: #9d9d9d;
  font-size: 90%;
}

.pricing_options .item .sup {
  display: block;
  width: 100%;
  min-height: 3px;
  background: #ff8b38;
}

.pricing_options .item .sup.-t {
  color: #fff;
  text-transform: uppercase;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
  padding: 5px 10px;
  box-sizing: border-box;
}

.pricing_options .item .include {
  display: block;
  width: 100%;
  background: #fff;
  text-transform: uppercase;
  color: #757575;
  font-size: 75%;
}

.pricing_options .item .include div {
  display: block;
  width: 100%;
  padding: 5px 10px;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.pricing_options .item .include div:not(:last-child) {
  border-bottom: 1px solid #f8f8f8;
}

<div class="pricing_options">
  <div class="item">
    <div class="top">
      <div class="title">Basic</div>
      <div class="price -dollar">0</div>
      <div class="desc">Free for Life</div>
    </div>
    <div class="sup"></div>
    <div class="include">
      <div>1gb of space</div>
      <div>10gb of bandwidth</div>
      <div>3 websites</div>
      <div>Basic customization</div>
      <div>Wordpress integration</div>
      <div>Email support</div>
    </div>
  </div>
  
  <div class="item">
    <div class="top">
      <div class="title">Professional</div>
      <div class="price -dollar">19</div>
      <div class="desc">Monthly payment</div>
    </div>
    <div class="sup -t">Our most popular</div>
    <div class="include">
      <div>5gb of space</div>
      <div>50gb of bandwidth</div>
      <div>12 websites</div>
      <div>Advanced customization</div>
      <div>Wordpress integration</div>
      <div>Email support</div>
    </div>
  </div>
  
  <div class="item">
    <div class="top">
      <div class="title">Enterprice</div>
      <div class="price -dollar">70</div>
      <div class="desc">Monthly payment</div>
    </div>
    <div class="sup"></div>
    <div class="include">
      <div>Unlimited of space</div>
      <div>Unlimited of bandwidth</div>
      <div>100 websites</div>
      <div>Advanced customization</div>
      <div>Wordpress integration</div>
      <div>24/7 customer support</div>
    </div>
  </div>
</div>