JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <form action='' id='search_bar'>
    <input type='text' name='search' id='ggg' />
    <input type='submit' name='submit_button' />
  </form>
  <div id='logo'>
    <img src='./img/flamingo.svg' />
    <a href='#'>Chirpify</a>
  </div>
  <div id='navigation'>
    <a href='#' class='profile'></a>
    <a href='#' class='msg'></a>
    <a href='#' class='noti'></a>
  </div>
</header>

CSS

* {
    margin: 0;
    padding: 0;
    font-family: 'Gill Sans', sans-serif;
    font-size: 12px;
}

header {
    position: fixed;
    top: 0;
    left: 0;

    display: grid;
    grid-template-columns: 40% 20% 40%;

    color: white;
    background-color: var(--dark-blue);

    height: 70px;
    width: 100%;
}

#search_bar{
    display: flex;

    align-self: center;
    justify-self: start;

    padding-left: 30px;
}

#search_bar input[type='text']{
    font-size: 0;
    
    border: none;
    background: url(../img/search.svg) no-repeat;
    border-radius: 0;

    color: white;

    height: 20px;
    width: 25px;
}




@media (max-width: 414px) and (max-height: 896px) {

        header{
            height: 180px;
        }

        #search_bar input[type='text']{
            height: 70px;
            width: 70px;
        }

        #search_bar input[type='text']:focus{
            width: 300px;
        }
}