one div gets bigger while the other gets smaller

Question

I\'m new to javascript, I\'m wondering how to get .contact from a 30% width to 40% when I go with my mouse over .contact. This works, but while .contact gets bigger I want .

Answer 1

You can do this with only CSS

.contact {
  background-color: red;
  width: 30%;
  float: left;
  transition:1s linear;
}

.div {
  background-color: blue;
  width: 70%;
  float: right;
  transition:1s linear;
}

.contact:hover {
  width: 40%;
}

.contact:hover + .div{
  width: 60%;
}

  

    
 Text
    
More textt
  

  

    
 Text
    
More textt
  

And for a more flexible way you can consider flexbox where you only need to change the hover element and the other one will shrink by default

.content {
  display: flex;
}

.contact {
  background-color: red;
  flex-basis: 30%;
  transition: 0.5s linear;
}

.div {
  background-color: blue;
  flex-grow:1;
}

.contact:hover {
  flex-basis: 40%;
}

  

    
 Text
    
More textt
  

  

    
 Text
    
More textt
  

UPDATE

If you want a permanent change you can try animation:

.content {
  display: flex;
}

.contact {
  background-color: red;
  flex-basis: 30%;
  transition: 0.5s linear;
  animation:big 0.5s linear forwards;
  animation-play-state:paused;
}

.div {
  background-color: blue;
  flex-grow:1;
}

.contact:hover {
  animation-play-state:running;
}
@keyframes big{
  to {flex-basis: 40%;}
}

  

    
 Text
    
More textt
  

  

    
 Text
    
More textt