如何同时转换按钮和输入框？

Question

我有一个search box，它transitions并在单击时会变大，旁边还有一个button。我的问题是input box轻柔地移动，但是button保持在原位，teleports结束后transition移到了它的位置。单击输入框后，如何在按钮上触发transition？

 .searchbox {
      width: 150px;
      height: 20px;
      box-sizing: border-box;
      border: 2px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
      background-color: white;
      background-position: 2px 2px; 
      background-repeat: no-repeat;
      padding: 12px 20px 12px 45px;
      -webkit-transition: width 0.4s ease-in-out;
      transition: width 0.4s ease-in-out;
      margin-top:10px;

    }

.searchbox:focus {
      width: 100%;
    }


.searchbt {
      float: left;
      width: 15px;
      height: 4px;
      padding: 10px;
      background: #2196F3;
      color: white;
      font-size: 17px;
      cursor: pointer;
      border:none;
      margin-top:10px;
      border-radius: 4px;
      position:absolute;
      z-index:1;
      border: 2px solid #ccc;
      border-right:none;
      -webkit-transition: width 0.4s ease-in-out;
      transition: width 0.4s ease-in-out;
        }
.searchbt:focus {
      width=100%;
    }

谢谢您的帮助。

编辑：我通过将按钮移到另一侧（不移动的那一侧）来临时修复它