Как разместить элементы внутри блока на одном уровне?

Question

[artem]

Как сделать чтобы они были на одном уровне? Скажем нужно выровнять их по центрам параллельно друг другу, как то так)
вот код

<a href="#" id="header-join">
    <p id="header-join-text">ВОЙТИ</p>
    <i class="fas fa-sign-in-alt" id="header-join-icon"></i>
</a>

#header-join {
	position: absolute;
	top: 50%;
	color: white;
	text-decoration: none;
	right: 5px;

	transform: translate(-0%, -50%);
}
#header-join-text {
	float: right; 
	margin-left: 5px;
	font-size: 18px;
	font-weight: 400;
	font-family: 'Exo 2', sans-serif;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
}
#header-join-icon {
	font-size: 24px; 
	float: right;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
}

Comments

[Антон]

как вариант - flex и align-items: center

[artem]

ubuntu_lts, пробовал, так только при дисплей флекс, а без него картинка в право переходит

Answer 1

[artem]

Решение

#header-join-text {
    line-height: 28px;
}