I am working on a team overview for a company where data such as name, job title, and information are fetched from the database. Due to varying lengths of information, the icons are not aligning properly in one line.
https://i.sstatic.net/cEmKj.png
Does anyone have suggestions on how to achieve a consistent distance for the icons from the bottom of the border box?
HTML: (Referring to the div named testusus)
@foreach ($employees as $employee)
<div class="col-sm-4">
<div class="float-box float-box-no-border-white about-team text-center tes">
<div class="hvrbox">
<a href="{{ action('WorkerController@show', $employee) }}"><img
src="{{ $employee->profile_picture_url }}" class="img-team">
<div class="hvrbox-layer_top">
<div class="hvrbox-text">Learn more about me</div>
</div>
</a>
</div>
<h3>{{ $employee->first_name }} {{ $employee->last_name }}<br>
<hr class="hr-team">
<small>{{ $employee->position }}</small>
</h3>
<p class="p-text">{{ $employee->main_info }}</p>
</div>
<div class="testusus">
<a href="mailto:{{ $employee->email_company }}"><i
class="icon-envelope icon-share-small"></i></a>
@isset($employee->linkedin)
<a href="{{ $employee->linkedin }}" target="_blank"><i
class="icon-linkedin icon-share-small"></i></a>
@endisset
</div>
</div>
@endforeach
CSS:
.testusus {
text-align: center;
position: relative;
bottom: 0;
}