引导程序对齐-搜索栏问题

Question

我需要创建一个引导设备响应的页面。我在调整方面面临困难。在内容的标题部分，我需要放置标题，然后放置搜索栏。我无法用动画引导我的搜索栏。有人可以帮我吗我已经在JSFiddle中添加了程序。https://jsfiddle.net/indhu_velayutham/xpvt214o/339863/

$(document).ready(function() {
  $(".searchInput").click(function() {
    $(".input").toggleClass("active").focus;
    $(".input-inner").toggleClass("active").focus;
    $(this).toggleClass("animate");
    $(".input-inner").val("");
  });

  $('#clear').click(function() {
    $('.input-inner.active').val('');
  });

});

.search_wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
}

.searchInput {
  height: 30px;
  width: 30px;
  position: relative;
}

.search-box {
  width: 400px;
  height: 100px;
  position: relative;
  margin-left: 70%;
}

.input {
  position: absolute;
  top: 20px;
  right: 147px;
  box-sizing: border-box;
  width: 5px;
  height: 40px;
  padding: 0 20px;
  outline: none;
  font-size: 18px;
  border-radius: 50px;
  color: black;
  border: 3px solid #00859b;
  transition: all 0.3s ease;
  margin-left: 40%;
}

.input-inner {
  width: 10px;
  right: 10px;
  transition: all 0.1s ease;
  border: 0px;
  outline: none;
}

#clear {
  position: relative;
  float: left;
  width: 20px;
  height: 22px;
  left: -10px;
  top: 12px;
  border-radius: 20px;
  color: white;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  transition: all 0.5s ease;
  background: #f1f1f1;
}

#clear:hover {
  background: #00859b;
}

.searchButton {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #00859b;
  /*button Background*/
  border-radius: 50%;
  right: 45px;
  top: 10px;
  cursor: pointer;
  text-align: center;
  line-height: 80px;
  font-size: 20px;
  color: #00859b;
}

.input-inner.active {
  margin-top: 15px;
  width: 160px;
  right: 150px;
  /*box-sizing: border-box;*/
  outline: none;
}

.input.active {
  width: 240px;
  right: 100px;
  height: 60px;
}

.btn.animate {
  transform: rotate(-360deg);
  /*right: 250px;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search_wrapper">
  <div class="search-box">
    <div class="input">
      <div id="clear">X</div>
      <input type="text" class="input-inner">
    </div>
    <div class="btn searchButton">
      <img class="searchInput img-responsive" id="searchInput" src="searchImage.png" alt="Search Icon">
    </div>
  </div>
</div>