EE - 29266753

by ChrisStanyon

HTML

<div id="wrapper">
  <div id="a">Div A</div>
  <div id="b">Div B</div>
</div>

CSS

#wrapper {
  display: flex;
  height: 100px;
  align-items: stretch;
}

#a {
  width: 10%;
  background-color: teal;
  transition: width 0.75s ease;
}

#b {
  background-color: red;
  flex: 1;
}

JavaScript

$("#a")
	.on("mouseenter", function(){
		$(this).css("width","40%");
	})
	.on("mouseleave", function(){
		$(this).css("width","10%");
	});