index.html 

<!DOCTYPE html>

<html lang="pt-br">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Barra de Pesquisa</title>

    <script src="https://kit.fontawesome.com/1e592b5726.js"></script>

     <link rel="stylesheet" href="style.css" />

</head>

<body>

    <header>

  <div>

            <h1>Barra de pesquisa</h1>

        </div>

  <form action="#" method="post">

            <input type="text" name="search" id="search" placeholder="Faça sua Busca" required>

            <button type="submit"><i class="fas fa-search"></i></button>

        </form>

 </header>

</body>

</html>

style.css

body {

    font-family: Verdana, Geneva, Tahoma, sans-serif;

}


header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    background-color: #8a2be2;

    padding: 1em;

}


form {

    border: 1px solid #F5F5F5;

    border-radius: 0.3em;

    padding: 0.3em;

}


form input, form button {

    font-size: 1.2em;

    border-radius: 0.2em;

    border: none;

    padding: 0.2em;

}


form button {

    cursor: pointer;

    background: none;

    color: #F5F5F5;

}

form button:hover {

    background-color: #F5F5F5;

    color: #8a2be2;

}