search-bar.css

body {
         padding: 0;
         margin: 0;
         height: 100vh;
         width: 100%;

     }

     form {
         position: relative;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         transition: all 1s;
         width: 50px;
         height: 50px;
         background: white;
         box-sizing: border-box;
         border-radius: 25px;
         border: 4px solid white;
         padding: 5px;
         box-shadow: 0px 0px 15px #4D77FF;

     }

     input {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 42.5px;
         line-height: 30px;
         outline: 0;
         border: 0;
         display: none;
         font-size: 1em;
         border-radius: 20px;
         padding: 0 20px;
     }

     .fa {
         box-sizing: border-box;
         padding: 10px;
         width: 42.5px;
         height: 42.5px;
         position: absolute;
         top: 0;
         right: 0;
         border-radius: 50%;
         color: #637eff;
         text-align: center;
         font-size: 1.2em;
         transition: all 1s;
     }

     form:hover {
         width: 30px;
         cursor: pointer;
     }

     form:hover input {
         display: block;
     }

     form:hover .fa {
         background: #637eff;
         color: white;
     }
.search-bar {
    margin-right: 40px;
}
.searchContainer {
    display: inline-flex;
    flex: 1 1 300px;

}
.searchContainer input.searchBox {}

.searchContainer .searchIcon {}