Невозможно установить ширину 0 для кнопки содержит группу ввода

Question

Я работаю над этой демонстрацией. Я не уверен, почему я не смог установить ширину #input-box на 0. Я пытаюсь скрыть этот контейнер и анимировать его ширину до требуемого размера, как это требуется, но я не могу правильно установить ширину 0

body {
  padding: 30px;
}
#input-box{
      width:0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary" id="input-box">
  <div class="input-group m-0">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">Zip Zode</span>
  </div>
</div>
  
  </button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

Answer 1

Обивка кнопки

#input-box{
  width:0px;
  padding:0;
}

Answer 2

Вы хотели бы, чтобы это выглядело? снимок экрана

Если это так, вам нужно указать некоторые другие свойства CSS:

 #input-box{
      width:0px;
      padding: 0;
      margin: 0;
      border: 0;
}

Answer 3

Вам также необходимо установить следующие свойства CSS:

body {
  padding: 30px;
}

#input-box {
  width: 0px;
  padding: 0;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary" id="input-box">
  <div class="input-group m-0">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">Zip Zode</span>
  </div>
</div>
  
  </button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>