rewrite search form in flexbox

assets/scss/partials/layout/search.scss

@@ -1,64 +1,63 @@
 .search-form {
     position: relative;
+    border-radius: var(--card-border-radius);
+    background-color: var(--card-background);
+    box-shadow: var(--shadow-l1);
+    color: var(--card-text-color-main);
+    width: 100%;
     --button-size: 80px;
+    display: flex;
+
+    overflow: hidden;
+    flex-direction: row;
+    justify-content: stretch;
+    gap: 0;
 
     &.widget {
         --button-size: 60px;
 
         label {
             font-size: 1.3rem;
-            top: 10px;
         }
 
         input {
             font-size: 1.5rem;
-            padding: 30px 20px 15px 20px;
+        }
+
+        .input-wrapper {
+            padding: 10px 20px 15px 20px;
         }
     }
 
-    p {
-        position: relative;
-        margin: 0;
+    .input-wrapper {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        gap: 5px;
+        padding: 15px 20px 20px 20px;
     }
 
     label {
-        position: absolute;
-        top: 15px;
-        left: 20px;
         font-size: 1.4rem;
         color: var(--card-text-color-tertiary);
     }
 
     input {
-        padding: 40px 20px 20px;
-        border-radius: var(--card-border-radius);
-        background-color: var(--card-background);
-        box-shadow: var(--shadow-l1);
-        color: var(--card-text-color-main);
-        width: 100%;
         border: 0;
         -webkit-appearance: none;
 
-        transition: box-shadow 0.3s ease;
-
         font-size: 1.8rem;
 
         &:focus {
             outline: 0;
-            box-shadow: var(--shadow-l2);
         }
     }
 
     button {
-        position: absolute;
-        right: 0;
-        top: 0;
-        height: 100%;
         width: var(--button-size);
         cursor: pointer;
         background-color: transparent;
         border: 0;
-
         padding: 0 10px;
 
         &:focus {

layouts/page/search.html

@@ -6,10 +6,10 @@
 {{ end }}
 {{ define "main" }}
 <form action="{{ .Permalink }}" class="search-form"{{ with .OutputFormats.Get "json" -}} data-json="{{ .Permalink }}"{{- end }}>
-    <p>
+    <div class="input-wrapper">
         <label>{{ T "search.title" }}</label>
         <input name="keyword" placeholder="{{ T `search.placeholder` }}" />
-    </p>
+    </div>
 
     <button title="{{ T `search.title` }}">
         {{ partial "helper/icon" "search" }}

layouts/partials/widget/search.html

@@ -2,14 +2,13 @@
 {{- if $query -}}
     {{- $searchPage := index $query 0 -}}
     <form action="{{ $searchPage.RelPermalink }}" class="search-form widget" {{ with .OutputFormats.Get "json" -}}data-json="{{ .Permalink }}" {{- end }}>
-        <p>
+        <div class="input-wrapper">
             <label>{{ T "search.title" }}</label>
             <input name="keyword" required placeholder="{{ T `search.placeholder` }}" />    
-        
-            <button title="{{ T `search.title` }}">
-                {{ partial "helper/icon" "search" }}
-            </button>
-        </p>
+        </div>
+        <button title="{{ T `search.title` }}">
+            {{ partial "helper/icon" "search" }}
+        </button>
     </form>
 {{- else -}}
     {{- warnf "Search page not found. Create a page with layout: search." -}}