Split navigation
HTML
<ul class="split-navigation">
<!-- Navigation item -->
<li class="split-navigation__item">
<a href="">...</a>
</li>
<!-- Navigation item that sticks to the right -->
<li class="split-navigation__item split-navigation__item--right">
<a href="">...</a>
</li>
</ul>
CSS
.split-navigation {
/* Content is centered horizontally */
align-items: center;
display: flex;
/* Reset styles */
list-style-type: none;
margin: 0;
padding: 0 0 0.5rem 0;
}
.split-navigation__item {
margin-right: 0.25rem;
/* Demo */
width: 1.25rem;
}
.split-navigation__item--right {
/* Sticks to the right */
margin-left: auto;
margin-right: 0;
}
Demo