[Support request] customize search bar

hi, I was wondering if it was possible to make the search bar appear on the right side as in the example.

I’m currently using this CSS

form.search-form.navigation-search.nav-search-active {
    top: 45px;
	  width: 100%;
	  left: 50%;
transform: translateX(-50%);
}

.navigation-search.nav-search-active {
    display: flex;
}

.inside-navigation.grid-container form.search-form .search-field {
    background-color: #f2f2f2;
}

.inside-navigation.grid-container form.search-form {
    background-color: #8ad6c1;
    padding: 10px;
    display: flex;
    align-items: center;
    }
	
}

@media (max-width: 768px) {
    form.search-form.navigation-search.nav-search-active {
    display: flex;
}

button.nav-search-button {
    border: none;
}
}

@media (max-width: 768px) {
    .menu-bar-items {
        z-index: 2;
        position: relative;
    }
    form.search-form.navigation-search.nav-search-active {
        max-width: calc(100% - 46px);
    }
}

.navigation-search {
    z-index: 9999;
}

.navigation-search input[type="search"], 
.navigation-search input[type="search"]:active, 
.navigation-search input[type="search"]:focus {
    background-color: #f0f0f0;
}

.main-navigation .main-nav ul li[class*="current-menu-"]:hover > a {
    color: var(--accent) !important;
    background-color: #8ad6c1 !important;
}

and this php

add_filter( 'generate_navigation_search_output', function() {
    printf(
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" placeholder="Search" class="search-field" value="%2$s" name="s" title="%3$s"  />
			<button class="nav-search-button">Search</button>
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' ) 
    ); 
} );