diff --git a/sites/google_flights/static/css/main.css b/sites/google_flights/static/css/main.css
index e1c3a76..296f399 100644
--- a/sites/google_flights/static/css/main.css
+++ b/sites/google_flights/static/css/main.css
@@ -273,12 +273,20 @@ img { max-width: 100%; height: auto; display: block; }
 }
 .search-row {
   display: flex;
-  gap: 0;
-  position: relative;
+  gap: 12px;
   margin-bottom: 24px;
+  align-items: stretch;
+}
+.search-route-fields {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  flex: 1 1 0;
+  min-width: 0;
 }
 .search-field {
-  flex: 1;
+  width: 100%;
+  min-width: 0;
   border: 1px solid var(--g-grey-400);
   padding: 12px 16px;
   font-family: var(--font-body);
@@ -297,6 +305,7 @@ img { max-width: 100%; height: auto; display: block; }
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
   border-left: none;
+  padding-left: 24px;
 }
 .search-swap {
   position: absolute;
@@ -315,8 +324,8 @@ img { max-width: 100%; height: auto; display: block; }
 .search-dates {
   display: flex;
   gap: 0;
-  flex: 1;
-  margin-left: 16px;
+  flex: 1 1 0;
+  min-width: 0;
 }
 .search-dates .search-field {
   border-radius: 4px 0 0 4px;
@@ -1987,7 +1996,9 @@ img { max-width: 100%; height: auto; display: block; }
 @media (max-width: 768px) {
   .hero h1 { font-size: 32px; }
   .search-row { flex-direction: column; }
-  .search-field, .search-dates { border-radius: 4px !important; margin-left: 0; }
+  .search-route-fields { display: flex; flex-direction: column; }
+  .search-field, .search-dates { border-radius: 4px !important; }
+  .search-field-to { border-left: 1px solid var(--g-grey-400); padding-left: 16px; }
   .search-swap { display: none; }
   .search-dates .search-field { border-left: 1px solid var(--g-grey-400); border-top: none; }
   .footer-top { grid-template-columns: 1fr; }
diff --git a/sites/google_flights/templates/index.html b/sites/google_flights/templates/index.html
index afba453..beb7590 100644
--- a/sites/google_flights/templates/index.html
+++ b/sites/google_flights/templates/index.html
@@ -22,11 +22,13 @@ <h1>Flights</h1>
   </div>
   <form action="{{ url_for('flights_list') }}" method="GET" class="search-form">
     <div class="search-row">
-      <input type="text" name="from" class="search-field search-field-from" placeholder="Where from? (e.g. JFK or New York)" value="" list="airport-list" required>
-      <button type="button" class="search-swap" aria-label="Swap">
-        <span class="material-symbols-outlined">swap_horiz</span>
-      </button>
-      <input type="text" name="to" class="search-field search-field-to" placeholder="Where to? (e.g. LAX or Los Angeles)" value="" list="airport-list" required>
+      <div class="search-route-fields">
+        <input type="text" name="from" class="search-field search-field-from" placeholder="Where from? (e.g. JFK or New York)" value="" list="airport-list" required>
+        <button type="button" class="search-swap" aria-label="Swap">
+          <span class="material-symbols-outlined">swap_horiz</span>
+        </button>
+        <input type="text" name="to" class="search-field search-field-to" placeholder="Where to? (e.g. LAX or Los Angeles)" value="" list="airport-list" required>
+      </div>
       <div class="search-dates">
         <input type="text" name="depart" class="search-field" value="" placeholder="Departure" maxlength="10" inputmode="numeric" pattern="\d{4}-\d{2}-\d{2}" autocomplete="off" data-datepicker="checkin" required>
         <input type="text" name="return" class="search-field" data-return-field value="" placeholder="Return (optional)" maxlength="10" inputmode="numeric" pattern="\d{4}-\d{2}-\d{2}" autocomplete="off" data-datepicker="checkout">