<div class="wrapper c-height">
  <div class="search-area c-height">
    <div class="single-search">
      <input class="custom-input" type="text" name="" placeholder="What are you looking for ...">
      <a href="#" class="icon-area"><i class="fa fa-search"></i></a>
    </div>
  </div>
</div>




<!--- ignore the code below-->

<div class="link-area">
  <a href="https://www.youtube.com/channel/UCki4IDK86E6_pDtptmsslow" target="_blank">Click for More</a>
</div>

body,html{
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #262626 !important;
}

.single-search {
  margin-bottom: auto;
  margin-top: auto;
  height: 40px;
  background-color: #fafafa;
  border-radius: 30px;
  padding: 10px;
}

.search-area{
  display: flex;
  justify-content: center;
}

.c-height {
  height: 100%;
}

.custom-input{
  border: 0;
  outline: 0;
  width: 0;
  line-height: 40px;
  transition: width 0.4s linear;
}

input::placeholder {
  color: #262626;
  font-size: 20px;
}

.single-search:hover > .custom-input{
  padding: 0 10px;
  width: 500px;
  caret-color:#262626;
  transition: width 0.4s linear;
}

.single-search:hover > .icon-area{
  background: white;
  color: #262626;
}

.icon-area {
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  float: right;
  display: flex;
  text-decoration: none;
  color: #262626;
}




/* ignore the code below */


.link-area
{
  position:fixed;
  bottom:20px;
  left:20px;  
  padding:15px;
  border-radius:40px;
  background:tomato;
}
.link-area a
{
  text-decoration:none;
  color:#fff;
  font-size:25px;
}