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;
    display: none!important;
    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 input[type="search"] {
  width: 300px;
}

.search input[type="button"] {
  width: 60px;
}

.search:hover input {
    display: block!important;
}

.search input[type="search"]:focus, .search input[type="search"]:focus + input[type="button"]  {
  display: block!important;
}