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 it with Flexbox

flex: 1 makes .contact expand to the rest of the available space.

You would then only need to define the width for .div and its width when .contact is hovered.

.content {
  display: flex;
}

.contact{
  background-color:red;
  flex: 1
}

.div {
  width: 70%;
  background-color: blue;  
}

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

       
  
                    
    
 Text
    
More textt
  
  

    
 Text
    
More textt