By default, the Hotel Booking plugin inherits styles of your theme, so the design and layout of the search form depend on your theme styles. Thus if there are no specific styles, the form is vertical to fit better all screen sizes and types of devices.
Nevertheless, now it is possible to easily change the layout of the search availability form, with the free Hotel Booking Styles addon. This article will explain how to change the layout of Search Forms using WordPress Block Editor (Gutenberg). Please, note that support for Hotel Booking Styles addon was added within the 3.8.1 version of Hotel Booking. So, make sure the plugin is updated at least to 3.8.1 version.
1) After that, go to Accommodation > Settings > More Styles and click the "Install & Activate button" (in this way, the Hotel Booking Styles addon will be installed and activated to your website automatically.
After, you may add the "Availability Search Form" or Booking Form blocks to the needed page or post and see the added "Styles" section on the right where you can set the needed style from the offered ones.
Note that there is also the "Customization" section, where it is possible to customize the search availability form further (e.g. hide labels, remove paddings between the form fields, hide message about required fields, wrap form fields onto multiple lines, stretch the button and limit the maximum width of the form fields).
Adjust layout of the form using Widgets
With the Hotel Booking Styles addon, it is also possible to change styles of the booking form that was added via Appearance > Widgets.
How to add horizontal search Form using Elementor
How to add horizontal search Form using Divi
Adjust layout of the form using shortcode
For this, go to Accommodation > Settings > Extensions > Styles. Here you may see the list of available classes that can be used in the shortcode:
Add the [mphb_availability_search] or [mphb_availability] shortcodes with the needed available classes to the page: