After click if CSS value equals

Don't know why it's not work.

when toggleClass is done,if CSS value equals do hide();

$(".rwd-sec").click(function() {
      $(".rwd-main").toggleClass("is-active");
      if ($(".rwd-main").css("right") == "-84%") {
        $(".rwd-main").hide();
      }
})

.rwd-main {
  right: -84%;
}

.rwd-main.is-active {
  right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rwd-main">
  <div class="rwd-sec"></div>
</div>

codepen