Как сделать симметричный нижний отступ текста в блоках?

Не так давно начал верстать. Самоучка. И вот встретил проблему, не понимаю как ее решить.


На скрине видно, что независимо от количества текста в блоке, элементы обозначенные желтой линией остаются на одном уровне. И расстояние обозначенное синей линией одинаковое.
Пытался сверстать подобный момент как на скрине с помощью bootstrap. В итоге у мне при изменении ширины браузера блоки начинают плыть, но только если в блоках разное количество текста соответсвенно.
Прошу более опытных верстальщиков, обьясните пожалуйста по какому принципу нужно правильно верстать данный момент, да и вообще выравнивать контент в блоках подобного типа. Часто встречаю такую ситуацию, но не понимаю как ее решить.

К примеры имеем

<div class="container-fluid about-icons">
				<div class="row">
					<div class="col-md-3 col-sm-3 col-xs-6">
						<i class="fa fa-user-o fa-4x" aria-hidden="true"></i>
						<span>Персонал</span>
						<p>Квалифицированные мастера, знающее толк в своем направлении</p>
					</div>
					<div class="col-md-3 col-sm-3 col-xs-6">	
						<i class="fa fa-info-circle fa-4x" aria-hidden="true"></i>
						<span>Консультация</span>
						<p>Определим индивидуальную процедуру или комлпекс специально для Вас
 и lorem lorem lorem</p>
					</div>
					<div class="col-md-3 col-sm-3 col-xs-6">
						<i class="fa fa-clock-o fa-4x" aria-hidden="true"></i>
						<span>Время работы</span>
						<p>Мы работаем с 9:00 - 21:00, 7 дней в неделю</p>
					</div>
					<div class="col-md-3 col-sm-3 col-xs-6">
						<i class="fa fa-coffee fa-4x" aria-hidden="true"></i>
						<span>Кофе чай</span>
						<p>Всегда угостим чашечкой вкусного кофе или чая</p>
					</div>
				</div>
			</div>