need bottom of text in a menu to line up

Question

I have a menu created like this:

    <div id="site-header-menu" class="site-header-menu">
  <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Primary Menu">
    <div class="menu-main-menu-container">
      <ul id="menu-main-menu" class="primary-menu">
        <li class="current-menu-item"><a href="http://localhost/fairground/">home</a></li>
        <li><a href="http://localhost/fairground/about-us/">about us</a></li>
        <li><a href="http://localhost/fairground/our-products/">our products</a></li>
        <li><a href="http://localhost/fairground/shop/">shop</a></li>

      </ul>
    </div>
  </nav>
  <!-- .main-navigation -->
</div>
<!-- .site-header-menu -->

When a link is active I need the font to be larger and I need all links to line up along the bottom of the text so the bottom of the large word 'home' lines up with the bottom of the next link and so on as in this image:

I can't seem to get this to work. I have tried various display:xxx for the li and the a, and various vertical-align properties but nothing seems to work

I have created a jsfiddle

Here's my css

.site-header-menu {
  background: rgba(244, 39, 58, 0.42);
  width: 100%;
  margin: 0;
  float: right;
  margin-top: 40px;
}

.main-navigation ul {
  list-style: outside none none;
  margin: 0;
}

.main-navigation a {
  color: red;
  font-size: 24px;
  letter-spacing: 1px;
  padding: 0;
  text-decoration: none;
  line-height: auto;
}

.main-navigation .primary-menu > li {
  display: table-cell;
  float: left;
  background: #ccc;
  vertical-align: baseline;
}

.current-menu-item a {
  vertical-align: bottom;
  font-size: 40px;
}

Answer 1

Not sure i understand correctly but like this?

$(document).ready(function(){
  var $items = $("#menu-main-menu > li");
  $items.on("click", function(){
    $items.removeClass("current-menu-item");
    $(this).addClass("current-menu-item");
  });
});

.site-header-menu {
  background: rgba(244, 39, 58, 0.42);
  width: 100%;
  margin: 0;
  float: right;
  margin-top: 40px;
}

.main-navigation ul {
  list-style: outside none none;
  margin: 0;
}

.main-navigation a {
  color: red;
  font-size: 24px;
  letter-spacing: 1px;
  padding: 0;
  text-decoration: none;
  line-height: auto;
}

.main-navigation .primary-menu > li {
  display: inline;
  background: #ccc;
}
.main-navigation .primary-menu > li:hover > a { font-size: 40px;color: black;}
.current-menu-item a {
  vertical-align: bottom;
  font-size: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="site-header-menu" class="site-header-menu">
  <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Primary Menu">
    <div class="menu-main-menu-container">
      <ul id="menu-main-menu" class="primary-menu">
        <li class="current-menu-item"><a href="#">home</a></li>
        <li><a href="#">about us</a></li>
        <li><a href="#">our products</a></li>
        <li><a href="#">shop</a></li>

      </ul>
    </div>
  </nav>
  <!-- .main-navigation -->


</div>
<!-- .site-header-menu -->