Почему кнопка поиска выпадает?

.search {
  display: flex;
  width: 100%;
  position: relative;
}

.searchbox {
  width: 100%;
  border: 3px solid green;
  border-right: none;
  padding: 5px;
  height: 20px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: black;
}

.searchbox:focus {
  color: black;
}

.searchbutton {
  width: 40px;
  height: 36px;
  border: 1px solid green;
  background: green;
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
}

.wrap {
  width: 50%;
  position: absolute;
  top: 10%;
  left: 10%;
}

<div class="wrap">
  <div class="search">
    <input type="text" class="searchbox" placeholder="Поиск">
    <button type="submit" class="searchbutton">
        <i class="fa-search"></i>
     </button>
  </div>
</div>