styled search in faqs one row with tags

adminstyles.css

@@ -1378,8 +1378,18 @@ Add your custom styles in this file so it is easier to update the theme.
 		grid-template-columns: repeat(4, 1fr);
 	}
 
-	.edit-post-visual-editor__content-area .ofisuport-faqs-types {
-		margin: 1em 0;
+	.edit-post-visual-editor__content-area .ofisuport-faqs-aside {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.edit-post-visual-editor__content-area .ofisuport-faqs-aside .ofisuport-search-form:hover,
+	.edit-post-visual-editor__content-area .ofisuport-faqs-aside .ofisuport-search-form:active,
+	.edit-post-visual-editor__content-area .ofisuport-faqs-aside .ofisuport-search-form:focus,
+	.edit-post-visual-editor__content-area .ofisuport-faqs-aside .ofisuport-search-form:target {
+		flex-grow: 1;
 	}
 }
 

inc/template-functions.php

@@ -123,7 +123,6 @@ if ( ! function_exists( 'ofisuport_display_faq_search' ) ) :
     // https://developer.wordpress.org/reference/functions/get_search_form/#comment-369
     // https://wordpress.stackexchange.com/questions/313037/restrict-a-search-to-a-custom-post-type
 ?> 
-    <aside id="search-form-faqs" class="ofisuport-search-faqs">
       <form class="ofisuport-search-form" role="search" method="get" action="/">
         <label class="screen-reader-text" for="search">Search in ajuts</label>
         <input type="search" id="search" class="search-field" placeholder="cerca faqs..." value="<?php the_search_query();?>" name="s" />
@@ -132,7 +131,6 @@ if ( ! function_exists( 'ofisuport_display_faq_search' ) ) :
         <input type="hidden" value="posts" name="post_type" id="post_type" />
         <input type="hidden" value="faq" name="category_name" id="category_name" />
       </form>
-    </aside>
 <?php
   }
 endif; //end ofisuport_display_each_faq_categories

page-templates/faqs-page.php

@@ -41,12 +41,12 @@ get_header();
 
 		endif;
     ?>
-
+     <aside id="ofisuport-faqs-nav" class="ofisuport-faqs-aside">
      <?php //if( in_category('faq') ) : ?>
        <?php ofisuport_display_faqs_labels(); ?>
        <?php ofisuport_display_faqs_search(); ?>
      <?php //endif; //end if is_category faq ?>
-
+     </aside>
       <content class="archive-posts <?php ofisuport_class_posttype(); ?>">
       <?php
        // https://developer.wordpress.org/reference/functions/get_posts/

sass/layouts/_no-sidebar.scss

@@ -113,12 +113,17 @@
 	.ofisuport-destacats,.ofisuport-featured,.archive-posts {
 		grid-template-columns: repeat(4 , 1fr);
 	}
-	.ofisuport-faqs-types {
-		margin: 1em 0;
-		.ofisuport-label {
-		//	margin: 0;
+  .ofisuport-faqs-aside {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+		.ofisuport-search-form {
+			&:hover,&:active,&:focus,&:target {
+			  flex-grow: 1;
+		  }
 		}
-	}
+  }
 }
 @media screen and (min-width: 80em) {
 	//only bigger than 80rem

search.php

@@ -38,11 +38,12 @@ if ( get_post_type( get_the_ID() ) == 'ofisuport-ajut'){ ?>
       </aside>
 <?php } elseif ( in_category ( 'faq' ) ) { ?>
 		<section id="filteredsearch" class="ofisuport-searched-query ofisuport-search-faqs">
-   
+      <aside id="ofisuport-faqs-nav" class="ofisuport-faqs-aside">      
        <?php //if( in_category('faq') ) : ?>
          <?php ofisuport_display_faqs_labels(); ?>
          <?php ofisuport_display_faqs_search(); ?>
        <?php //endif; //end if is_category faq ?>
+      </aside>              
    
 
 <?php } else { ?>

style.css

@@ -1245,8 +1245,18 @@ textarea {
 		grid-template-columns: repeat(4, 1fr);
 	}
 
-	.ofisuport-faqs-types {
-		margin: 1em 0;
+	.ofisuport-faqs-aside {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.ofisuport-faqs-aside .ofisuport-search-form:hover,
+	.ofisuport-faqs-aside .ofisuport-search-form:active,
+	.ofisuport-faqs-aside .ofisuport-search-form:focus,
+	.ofisuport-faqs-aside .ofisuport-search-form:target {
+		flex-grow: 1;
 	}
 }