JSFiddle - React, Tailwind, and code Playground

by Sergey Denisov

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<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>

CSS

.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;
    }