Inline Post Navigation

By default, the post navigation is stacked like this:

The CSS below would position inline like this:

Icon Type: Font

.post-navigation {
    display: flex;
}

.post-navigation .nav-next {
    width: 50%;
    text-align: right;
}

.post-navigation .nav-previous {
    width: 50%;
}

.post-navigation .nav-next .next:before {
    display: none;
}

.post-navigation .nav-next .next:after {
    font-family: GeneratePress;
    text-decoration: inherit;
    position: relative;
    margin-left: .6em;
    width: 13px;
    text-align: center;
    display: inline-block;
    content: "\f105";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    speak: none;
}

Icon Type: SVG

.post-navigation {
	display: flex;
}

.post-navigation .nav-next {
	width: 50%;
	text-align: right;
	display: flex;
	flex-direction: row-reverse;
}

.post-navigation .nav-previous {
	width: 50%;
}

.nav-next .gp-icon {
	margin-left: .6em;
	margin-right: 0;
}

.post-navigation {
	display: flex;
}

.post-navigation .nav-next {
	width: 50%;
	text-align: right;
	display: flex;
	flex-direction: row-reverse;
}

.post-navigation .nav-previous {
	width: 50%;
}

.nav-next .gp-icon {
	margin-left: .6em;
	margin-right: 0;
}

.post-navigation :not(.nav-previous) + .nav-next {
    width: 100%;
}