Right-align custom search bar next to main menu

I’m trying to replace the default search icon in the header with a custom search bar, so that I got my logo on the left and the main menu followed by the search bar on the right. This mock-up illustrates the desired layout.

From what I understand, there are basically two methods to achieve this. Method A adds a
<div class='custom-form'>{$form}</div>
to the child theme’s function.php along with some CSS-code to place the search bar at the correct position.

Method B also adds a function to the functions.php. But the search bar is then done with a new custom widget.

Although I got both methods working in no time, I struggle to align the search bar right next to the main menu. Using method A, the search bar’s position doesn’t align correctly. Same thing with method B. Maybe there’s a better way for this, e.g. editing the header.php directly?

Any help on this would be greatly appreciated – thanks in advance!