JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="input-group search">
  <a class="nav-link " href="#!">Arama</a>
  <input type="search" class="form-control" maxlength="64" placeholder="Aranacak metni girin" />
  <input type="button" class="form-control btn btn-primary" value="Ara">
</div>

CSS

.search {
    position: relative;
    left: 10px;
    float: left;
}


.search input  {
    position: absolute;
    overflow: hidden;
    visibility: hidden;
    float: Left;
    margin-right: 0px;
    -webkit-transition: all 0s ease-in-out;
    -moz-transition: all 0s ease-in-out;
    -o-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out;
    border-radius:1px;
}

.search:hover input[type="search"], .search input[type="search"]:focus {
    width: 300px;
    margin-right: 0px;
    visibility: inherit;
}
.search:hover input[type="button"], .search input[type="button"]:focus {
    width: 60px;
    margin-left: 0px;
    visibility: inherit;
}