Div's width decreases when show slide animation is playing

jQuery(".title-annales").on("click", function() {
  var element = jQuery(this);
  if (jQuery(this).next().css('display') === 'none') {
    element.css('border-radius', '20px 20px 0px 0px');
    jQuery(this).next().show('slide', {
      direction: 'up'
    }, 'slow', function() {
      element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-up"></i>');
    });

  } else {
    jQuery(this).next().hide('slide', {
      direction: 'up'
    }, 'slow', function() {
      element.css('border-radius', '20px');
      element.find('.span-msg-mediadroit-annale').html('<i class="fas fa-chevron-circle-down"></i>');
    });
  }
});

.card-annales {
  display: block;
  margin-bottom: 20px;
}

.title-annales {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px 20px;
  background-color: #012f51;
  color: #ff6501;
  font-size: 1.7em;
  border: gray 1px solid;
  padding: 10px 30px;
  cursor: pointer;
}

.content-annales {
  border-left: gray 1px solid;
  border-right: gray 1px solid;
  border-bottom: gray 1px solid;
  padding: 10px;
  border-radius: 0px 0px 20px 20px;
  display: none;
  width: calc(100% - 20px); /* added */
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="card-annales">
  <div class="title-annales">
    <span class="span-msg-mediadroit-annale float-right"><i class="fas fa-chevron-circle-down"></i></span>
    <h3 style="font-size: inherit; display: contents; font-weight: inherit;">Nom matière</h3>
  </div>
  <div class="content-annales">
    [...]
  </div>
</div>