I need to make a search bar responsive

Question

 var conteudo_requisiçao; 
        jQuery(document).ready(function() {
        jQuery("#txt1").on("keyup", function(e) {
        e.preventDefault();

    var texto_digitado = jQuery("#txt1").val()
    var busca = {
        action: "busca",
        busca: texto_digitado
                };    
    
                /**chamada ajax */
            jQuery.ajax({
                url: dataAjax.url,
                type: "POST",
                data: busca,
                dataType: "JSON",
                success: function(response) {
                    if (response == "401" ){
                        console.log("Requisição inválida")
                    }
                    else if (response == "402") {
                        console.log("Todos os posts já foram mostrados")
                    } else {
                        console.log(response);
                        //conteudo_requisiçao = response;
                        /**utilizando jQuery para exibir elemento do banco na tela*/
                        jQuery("#div_busc ul").html("");
                        /**realizando o loop */
                        response.produtos.forEach(function(element) {
                            jQuery("#div_busc").children("ul").append("<li>"+element.NOME+"</li>", "<img width='50px' src='" + element.LINK + "' class= img_search >");  
                        });
                    }
                }
            });
        });
    
    });
    
<?php
class SNAP_busca{
  public function __construct(){
add_action('wp_ajax_busca', array($this, 'busca'));
add_action('wp_ajax_nopriv_busca', array($this, 'busca'));}

public function busca(){
  $busca = '%' . $_POST['busca'] . '%';
  $resultado = SF()->query->run("SELECT pi.LINK, p.ID_PRODUTO, p.NOME  FROM #BANCO#.produtos p, #BANCO#.produtos_imagens pi
                                  WHERE p.ID_PRODUTO = pi.ID_PRODUTO
                                    and NOME LIKE %s
                                      limit 3
                               ",array( $busca ) );
  wp_send_json(array(

    'codigo' => 0,
    'mensagem' => 'RESULTADO',
    'produtos' => $resultado
  
  ));
var_dump ($resultado);


}
}

 <div id="div-flex">
        <div id="div3">
            <!-- Exibindo barra de pesquisa na tela-->
            <input type='search'  id="txt1"  placeholder="Buscar produtos..."   class="produtos"   list="listas" autocomplete="on">
                <svg version="1.1" class="svgg1" xmlns="http://www.w3.org/2000/svg" 
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="24" 
                    list="historico" viewBox="0 0 51.539 51.361"
                    widht="24"  enable-background="new 0 0 51.539 51.361" xml:space="preserve">
                        <path fill="#444" d="M51.539,49.356L37.247,35.065c3.273-3.74,5.272-8.623,5.272-13.983c0-11.742-9.518-21.26-21.26-21.26 S0,9.339,0,21.082s9.518,21.26,
                            21.26,21.26c5.361,0,10.244-1.999,13.983-5.272l14.292,14.292L51.539,49.356z M2.835,21.082 c0-10.176,8.249-18.425,18.425-18.425s18.425,8.249,18.425,18.425S31.436,
                            39.507,21.26,39.507S2.835,31.258,2.835,21.082z"> <!-- Icone de lupa -->
                        </path> 
                </svg>
            </input>
            <div id=img123></div>
            <div id="div_busc"  class="div-back">
                <ul>
                </ul>
            </div>
        </div>
    </div>
    

If someone can help me, I need to leave the responsive bar in the middle of the screen, and if anyone knows how is the styling of wp’s Ajax plugin would help me a lot too.