toggleClass does not work on hover as expected - won´t resize div

Question

My goal is to change the css class of a div on hover, which does not work accurately. (Change smoothly from lsausschreibung to resizels). The code aims at displaying two different sized boxes next to each other, which will swop sizes on hover of the smaller box.

Any hints are highly appreciated!

$("rsausschreibung").hover(function() {
  $("lsausschreibung").toggleClass("resizels");
});  

.annonce {
  margin-left: 30px; 
  width: auto;
}

.lsausschreibung {
  float: left;
  position: relative;
  margin-right: -10px;
  height: 320px;
  width: 280px; 
  z-index: 10;
  background-color: white;
  box-shadow: 5px 2px 14px rgba(0, 0, 0, 0.6); 
}

.resizels {
  float: left;
  position: relative;
  height: 290px; 
  width: 230px;
  z-index: 1;
  background-color: white;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transition: .5s ease-in-out;
}

.rsausschreibung {
  float: left;
  position: relative;
  height: 290px; 
  width: 230px;
  z-index: 1;
  margin-top: 15px;
  background-color: white;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transition: .5s ease-in-out;
}

.rsausschreibung:hover {
  z-index: 20;
  transition: .5s ease-in-out;
  margin-top: 0px;
  height: 320px;
  width: 280px;
  box-shadow: 5px 2px 14px rgba(0, 0, 0, 0.6); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="annonce">

  <div class="lsausschreibung">

  </div>

  <div class="rsausschreibung">

  </div>

Answer 1

What about something like that ?

$(".rsausschreibung").hover(function() {
  $(".lsausschreibung").toggleClass("small large");
  $(".rsausschreibung").toggleClass("small large");
});

.annonce {
  margin-left: 30px; 
  width: auto;
}

.lsausschreibung {
  float: left;
  position: relative;
  margin-right: -10px;   
  background-color: white;    
  transition: all 0.5s ease-in-out;
}

.large {
  height: 320px;
  width: 280px; 
  z-index: 10;
  box-shadow: 5px 2px 14px rgba(0, 0, 0, 0.6); 
}

.small {
  height: 290px; 
  width: 230px;
  z-index: 1;
  margin-top: 15px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.rsausschreibung {
  float: left;
  position: relative;
  z-index: 1;
  background-color: white;
  transition: all 0.5s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="annonce">
    <div class="lsausschreibung large">
    </div>
    <div class="rsausschreibung small">
    </div>
</div>