ARROW-14499: [Docs] Version dropdown side-by-side with search box

docs/source/_static/theme_overrides.css

@@ -93,6 +93,25 @@ Details: min(15vh, 110px) for the logo size, 8rem for search box etc*/
   }
 }
 
+/* Styling to get the version dropdown and search box side-by-side on wide screens */
+
+#version-search-wrapper {
+  overflow: hidden;
+  width: inherit;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: left;
+  align-items: center;
+}
+
+#version-button {
+  padding-left: 0.5rem;
+  padding-right: 1rem;
+}
+
+#search-box {
+  flex: 1 0 12em;
+}
 
 /* Fix table text wrapping in RTD theme,
  * see https://rackerlabs.github.io/docs-rackspace/tools/rtd-tables.html

docs/source/_templates/docs-sidebar.html

@@ -3,13 +3,17 @@
   <img src="{{ pathto('_static/' + logo, 1) }}" class="logo" alt="logo">
 </a>
 
+<div id="version-search-wrapper">
+
 {% include "version-switcher.html" %}
 
-<form class="bd-search d-flex align-items-center" action="{{ pathto('search') }}" method="get">
+<form id="search-box" class="bd-search d-flex align-items-center" action="{{ pathto('search') }}" method="get">
   <i class="icon fas fa-search"></i>
   <input type="search" class="form-control" name="q" id="search-input" placeholder="{{ theme_search_bar_text }}" aria-label="{{ theme_search_bar_text }}" autocomplete="off" >
 </form>
 
+</div>
+
 <nav class="bd-links" id="bd-docs-nav" aria-label="Main navigation">
   <div class="bd-toc-item active">
     {% if "python/api" in pagename or "python/generated" in pagename %}

docs/source/_templates/version-switcher.html

@@ -1,4 +1,4 @@
-<div class="dropdown">
+<div id="version-button" class="dropdown">
     <button type="button" class="btn btn-secondary btn-sm navbar-btn dropdown-toggle" id="version_switcher_button" data-toggle="dropdown">
         {{ release }}
         <span class="caret"></span>