CSS Transition Sends Div Below Content on :hover exit - css

Question

I have the css transition working when the user hovers over item however when the mouse exits the div, content is pushed below during the transition. Below is my html/css along with a jsfiddle to show what I mean.
html:
<div id="container">
<div class="item">
<div class="img">
</div>
<div class="heading">
</div>
</div>
</div>
css:
#container {
width: 100%;
height: 100%;
}
.item {
width: 100%;
height: 400px;
position: relative;
}
.img {
background: #000;
width: 40%;
height: 400px;
float: left;
transition: width 0.5s ease;
}
.heading {
width: 60%;
height: 400px;
float: right;
background: #900;
transition: width 0.5s ease;
}
.item:hover .img {
width: 100%;
}
.item:hover .heading {
width: 100%;
background:rgba(255,255,255, 0.9);
position: absolute;
top:0;
left:0;
}
JSFiddle
I am sure it is a simple position problem. However, I am not familiar enough with the transition to know where to find the answer.
Updated position to
tranform: translateY(-100%);
in order to get rid of the non-transition property. Now before/after :hover the div heading gets pushed below item. Updated JSFiddle to show.
Updated transition: all to transition: width on both img and heading which fixed heading getting pushed below img on :hover, however the original problem of heading being pushed below when user exits :hover is still an issue.

Answer 1

I think I found the answer:
by making heading have position:absolute;, I can have it forced to stay inside of the item div, keeping it from moving below it. So my updated css (with actual class names and production stuff) looks like;
.flight {
height: 400px;
position: relative;
}
.flight-img {
background: red;
background-size: cover;
width: 40%;
height: 400px;
float: left;
position: relative;
/* CSS Animation Effects */
transition: width 0.5s ease;
}
.flight-heading {
width: 60%;
float: left;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
transition: width 0.5s ease;
}
/* Alternate img float ***
/* Probably an easier way but this works for now */
.flight:nth-of-type(4n-1) .flight-img{
float: right;
}
.flight:nth-of-type(4n-3) .flight-img{
float: left;
}
.flight:nth-of-type(4n-1) .flight-heading{
left:0;
}
.flight:nth-of-type(4n-3) .flight-heading{
float: right;
}
/* Adding hover effects for desktop */
.flight:hover .flight-img {
width: 100%;
}
.flight:hover .flight-heading {
width: 100%;
position:absolute;
top:0;
left:0;
transform: translateY(50%);
background: rgba(0,0,0,0.75);
color: #fff;
h2 {
color: #fff;
}
}
while my html looks like:
<div id="flights">
<div class="flight">
<div class="flight-img"></div>
<div class="flight-heading">
<h2>Shared Flights</h2>
<p>The shared flight option is available for 1 to 5 people. This is our most economical flight. You will fly with other passengers that are booked that day.</p>
<button>Book Now</button>
</div>
</div>
<div class="clear"></div>
</div><!-- End Flights -->
with a JSFiddle to show. I know the animation needs work, but I figure making it smooth will be easy now that the divs stay in one place.