Subscription page

gistfile1.txt

<div class="page-division">
  <div class="page-left">
[left_menu name="Subscriptions" image_src='http://crush.test/wp-content/uploads/2020/04/noun_subscribe_1175154-1.svg' device="Mobile"]
[left_menu name="Subscriptions" device='Desktop']
  </div>
  
  
  <div class="page-right">
        
<div class="nav-tabs tabs-nav">
  <button class="nav current">Subscriptions</button>
<button class="nav" style="border-radius: 0 5px 5px 0">Orders</button>
</div>
    
<div class="tab-content">
  <div class="price info active">
        <div><h5>[crush_customer_subscription]</h5></div>
  </div>
  <div class="price info">
       <div><h5> [customer_subscription]</h5></div>
  </div>
</div>
  
     
    
  </div>
</div>
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->




.page-division
{
  display: flex;
}
.page-left
{
  width: 15%;
}
.page-right
{
  width: 85%;
}
.order-wrapper {
margin : 80px auto;
}
.subs-heading
{
  font-size: 35px;
  text-align: center;
  margin-bottom: 50px;
  font-weight: bold;
}
.order
{
width : 45%;
margin: auto auto;
background: #F8F8F8;
margin-bottom: 45px;
padding: 20px 25px;
}
.order-id-status
{
  display: flex;
}
.order-id-status p
{
font-size: 14px;
color: #222;
font-weight: bold;
align-self:center;
}
.order-id-status button
{
  color: #FFF;
  background: #A4C409; 
  border: none;
  outline: none;
  border-radius: 5px;
  margin-left: 15px;
  font-size: 14px;
  cursor: auto;
}
.order-id-status button: hover, .order-id-status button:focus
{
  color: #FFF;
  background: #A4C409;
  border: none;
}
.order h4
{
  font-size: 25px;
  font-weight: bold;
  color: #222;
  margin: 25px auto;
}
.order-item
{
background: #222;
border-radius: 5px;
color: #fff;
font-weight: 500;
padding: 10px 15px;
margin-bottom: 15px;
}
 .items
{
  display: grid;
  grid-template-columns: 50%    25%;
  justify-content: space-between;
}
/* Tabs - CSS */
  .info
{
    display:none;
}
.active{display:block}
.nav-tabs{border-bottom: none;}
.tabs-nav
{
  margin: 20px 30px;
}
.nav
{
    border: none;
    outline :none;
    background: #F2F2F2;
    color: #222;
    font-size:16px;
    padding: 10px 20px;
}
.tabs-nav .nav:nth-child(1)
{
  border-radius: 5px 0 0 5px;
}
.tabs-nav .nav:nth-child(2)
{
  border-radius: 0px 5px 5px 0px;
  padding: 10px 45px;
  margin-left: -5px;
}
.nav:hover, .nav:active, .nav:focus
{
  outline: none;
  background: #F2F2F2;
  color: #222;
}
.current
{
   background:#A4C409 !important;
   color: #000 !important;
   /*font-weight: bold;*/
   border: none;
   outline: none;
   border-radius: 5px;
}
.subscriptions
{
  margin: 80px auto !important;
}
.button
{
    background: #A4C409;
    color: #000;
    font-weight: bold;
    font-size: 15px;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
}
.button:hover
{
  color: #000 !important;
}
.wc-item-meta
{
  list-style: none !important;
}
.view
{
  margin-right: 10px;
}

@media only screen and (max-width:728px)
{
  .page-division
{
  display: flex;
  flex-direction: column;
}
.page-left
{
  width: 100%;
}
.page-right
{
  width: 100%;
}
.order-wrapper {
margin : 50px auto;
}
  .subs-heading
{
  font-size: 25px;
  margin-bottom: 35px;
}
.order
{
width : 80%;
}
.order h4
{
  font-size: 18px;
}
.items
{
 grid-template-columns: 65%  20%;
}
  .tabs-nav
  {
    margin: 30px 30px;
    display: flex;
    justify-content: center;
  }
  .button
  {
    padding: 1px 4px;
  }
  .subscriptions
  {
    width: 80% !important;
  }
  table
{
  overflow: overlay !important;
}
}










 $(document).ready(function(){
    
  var btn = $('.nav'),
      info = $('.info');
    btn.click(function(e) {
        e.preventDefault();
        var index = $(this).index();
        info.hide();
        info.eq(index).show();
        $('.nav').removeClass('current');
        $(this).addClass('current');
    });
});