Search button doesn't scale in with the rest of search bar

I'm new to the whole CSS coding and sometimes I get stuck. I followed an online tutorial on how to make a search bar that is animated so it looks pleasing. I'm doing a website for my school project and I'm almost finished just adding few bits here and there. It's about technology from the beginning of the 20th century to our present day.

.search-pos {
  display: block;
  margin-left: auto;
  width: 330px;
  position: relative;
  top: -40px;
}

.search-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-55%, -55%);
  background: white;
  height: 40px;
  border-radius: 60px;
  padding: 10px;
}

.search-box:hover>.search-txt {
  width: 240px;
  padding: 0 4px;
}

.search-box:hover>.search-btn {
  background: white;
  padding: 10px;
}

.search-btn {
  color: black;
  float: center;
  width: 30px;
  height: 30px;
  border-radius: 80%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
}

.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: white;
  font-size: 14px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px;
}

<div class="search-pos">
  <div class="search-box">
    <input class="search-txt" type="text" name="" placeholder="Type to search">
    <a class="search-btn" href="#">
      <i class="fas fa-search"></i>
    </a>
  </div>
</div>

I've tried changing the padding, positioning or even the height but nothing seems to work. I think I need to add another line of code but I'm unsure what it would be.

This what happens:

Image / Imgur

As you can witness the button doesn't stay inside the bar itself like it should.