Translate with CSS to the top of a div - html

Question

I have 3 boxes within a fluid container.
Each box has a heading title, an icon and some text below.
On :hover I want the icon to move to the top of the <div> and change it's size, I have managed to "achieve" it but using certain number of pixels.
That will not work in mobile resolutions if the title text is longer and takes 2 lines.
Here is what I have done so far:
Fiddle here
HTML
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center market-blocks orange wow rollIn">
<div class="service-box">
<h2>Title</h2>
<i class="fa fa-5x fa-paper-plane wow bounceIn market-icon" data-wow-delay=".1s"></i>
<p class="">Certain text below the icon</p>
</div>
</div>
</div>
CSS
.container{
text-align:center;
}
.market-blocks{
background: #3aa0d1;
padding: 30px 0 30px 0;
cursor:pointer;
}
.orange{
background: #e97d68;
}
i.market-icon {
-webkit-transition: 1s ease-in;
-moz-transition: 1s ease-in;
-o-transition: 1s ease-in;
transition: 1s ease-in
}
.market-blocks:hover i.market-icon {
-webkit-transform: translate(0,-70px);
-moz-transform: translate(0,-70px);
-o-transform: translate(0,-70px);
-ms-transform: translate(0,-70px);
transform: translate(0,-70px);
font-size: 1.8em;
}
How can I do it? And also is there a better way to do the movement from the initial position to the top of the <div>?

Answer 1

Pure HTML/CSS solution:
.container {
text-align: center;
}
.market-blocks {
background: #3aa0d1;
padding: 30px 0;
cursor: pointer;
}
.orange {
background: #e97d68;
}
.service-box {
display: inline-block;
}
.service-box-header {
position: relative;
}
.market-title {
padding-bottom: 5em;
-webkit-transition: 1s ease-in;
transition: 1s ease-in
}
.market-icon {
position: absolute;
right: 0;
bottom: 0;
left: 0;
-webkit-transition: 1s ease-in;
transition: 1s ease-in
}
.market-blocks:hover .market-title {
padding-bottom: 0;
}
.market-blocks:hover .market-icon {
bottom: 100%;
font-size: 1.8em;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center market-blocks orange wow rollIn">
<div class="service-box">
<div class="service-box-header">
<h2 class="market-title">Very-very-very-very-very-very-very-very loooooooooooooooooooong title</h2>
<i class="fa fa-5x fa-paper-plane wow bounceIn market-icon"></i>
</div>
<p class="">Certain text below the icon</p>
</div>
</div>
</div>
</div>