Есть вот такие элементы :
И я их разместил горизонтально, (так нужно):
Вот таким образом:
https://jsfiddle.net/petroyarmolenko/udrnq1to/8/
Может кому удобнее будет напишу еще код прямо здесь:
HTML<div class="region-header">
<div class="region--first">
<div class="block1">
<div class="menu-link">
<a href>Menu</a>
</div>
<div class="menu-icon">
<div>---</div>
</div>
</div>
<div class="block2">
<div class="search-box-link">
<a href>Search</a>
</div>
<div class="search-icon">
<div>+++</div>
</div>
</div>
</div>
</div>
CSS.region-header {
.region--first {
display: flex;
font-size: rem(15);
font-family: $font-family-work-sans;
align-items: center;
.block1 {
display: flex;
.menu-link {
/* some code */
}
.menu-icon {
/* some code */
}
}
.block2 {
display: flex;
.search-box-link {
/* some code */
}
.search-icon {
/* some code */
}
}
}
}
Но на code review получил такое замечание:
Я не совсем понимаю, почему вы используете только display: flex; без каких-либо других настроек flex. Может быть, есть какой-то другой способ сделать это? 
Простой
