coding help for pricing table

I need help designing the pricing table attached.

I have got the following code but would like the grey box on the left to be the same height as the box on the right.

It works for mobile but on tablet and above it looks uneven. Is this possible in CSS. 

code:

<div class="st-price-section">
<div class="st-price-columns">
  <ul class="st-price-price">
    <li class="st-price-header">heading one</li>
        <li class="grey"><a class="st-button">$</a></li>

    <li>line 1</li>

    <li>line 2 </li>
    <li>line 2 </li>

  </ul>
</div>

<div class="st-price-columns">
  <ul class="st-price-price">
    <li class="st-price-header">heading 2</li>
          <li class="grey"><a class="st-button">$</a></li>
   <li>line 1</li>

    <li>line 2 </li>
    <li>line 3 </li>
    <li>line 4 </li>
    <li>line 5 </li>
    
</ul>
</div>

</div>

<style>
.st-price-section * {box-sizing: border-box;  }
.st-price-columns {width: 50%;padding: 8px; float: left; grid-auto-rows: 2fr;  }
.st-price-price {list-style-type: none; margin: 0;padding: 0;text-align: center;-webkit-transition: 0.3s; transition: 0.3s;}
.st-price-price:hover {box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)}
.st-price-price .st-price-header {background-color: #e0474c;color: white;font-size: 26px; font-weight: 700; text-align: center; text-transform: uppercase}
.st-price-price li {padding: 5px;background-color: #F1EFED; color: #444040; }
.st-price-price .grey {background-color: #444040;font-size: 22px;font-weight: 700;}
.st-button {border: none;color: white;padding: 10px 25px;text-align: center;text-decoration: none;font-size: 26px;}

@media only screen and (max-width: 925px) {.st-price-columns {width: 50%;}
}
@media only screen and (max-width: 600px) {.st-price-columns {width: 100%;}
}

</style>

You should share link to your site.

Just looking at the code, very time-consuming, will limit other from answering.

Not related, you can use Text Block + CSS to create Pricing Tablet. You can easily edit everything. I did for a client a month ago.

Yep - it is done via the code block - it is on a trial page so can't share.

The code from this article: https://www.spacetutorials.com/pricing-table which is adapted from this W3Schools article: https://www.w3schools.com/howto/howto_css_pricing_table.asp 

Neither has been built to take advantage of the built-in responsive features of Squarespace.