Unable to shift text upwards in HTML - html

Question

I'm probably really sleepy and missing something easy here. I've tried every margin and padding available but I'm unable to lift a span (div or any other text containing element for that matter) that contains some text to the right level.
What's the best way to achieve this? In the fiddle below, i want to align it with the font-awesome icon.
.add-cohorts-button > a > i {
padding-top: 5px;
}
.add-cohorts-button > span {
padding-left: 8px;
/*any amount of bottom margin/padding doesn't work. Try it. Height didn't either */
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-xs-3 add-cohorts-button">
<a href="addcohort.form"><i class="fa fa-plus-square-o fa-2x" aria-hidden="true"></i>
<span>Hello from the other side </span></a>
</div>
Way out of this fix?

Answer 1

This Suits you?
Adjust the margin according to your icon height.
.add-cohorts-button > a > i {
padding-top: 5px;
}
.add-cohorts-button span {
position:absolute;
padding-left:8px;
margin-top:10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-xs-3 add-cohorts-button">
<a href="addcohort.form"><i class="fa fa-plus-square-o fa-2x" aria-hidden="true"></i>
<span>Hello from the other side </span></a>
</div>

Answer 2

Use display: inline-block on your link so that it can fit its height to its contents, then use vertical-align: middle, like this:
.add-cohorts-button a {
display: inline-block;
}
.add-cohorts-button > * {
vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-xs-3 add-cohorts-button">
<i class="fa fa-plus-square-o fa-2x" aria-hidden="true"></i>
<span>Hello from the other side </span>
</div>
Version with the whole thing as a link:
.add-cohorts-button {
text-decoration: none;
}
.add-cohorts-button i {
display: inline-block;
}
.add-cohorts-button > * {
vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<a class="col-xs-3 add-cohorts-button" href="addcohort.form">
<i class="fa fa-plus-square-o fa-2x" aria-hidden="true"></i>
<span>Hello from the other side </span>
</a>