.navbar-form { position: relative; } #suggestions { position: absolute; right: 0; margin-top: 0.5rem; width: calc(100vw - 3rem); max-height: 500px; overflow: auto; } #suggestions a { display: block; text-decoration: none; padding: 0.75rem; margin: 0 0.5rem; } #suggestions a:focus { background: $gray-100; outline: 0; } #suggestions div:not(:first-child) { border-top: 1px dashed $gray-200; } #suggestions div:first-child { margin-top: 0.5rem; } #suggestions div:last-child { margin-bottom: 0.5rem; } #suggestions a:hover { background: $gray-100; } #suggestions span { // display: flex; font-size: $font-size-base; } #suggestions span:first-child { font-weight: $headings-font-weight; color: $black; } #suggestions span:nth-child(2) { color: $gray-700; } @include media-breakpoint-up(sm) { #suggestions { width: 30rem; } #suggestions a { display: flex; } #suggestions span:first-child { width: 9rem; padding-right: 1rem; border-right: 1px solid $gray-200; display: inline-block; text-align: right; } #suggestions span:nth-child(2) { width: 19rem; padding-left: 1rem; } }