the transition width when an element changes its width

.container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  border: 2px solid black;
}

.logo,
.search,
.im-expanding {
  border: 2px solid red;
}

.logo {
  width: 125px;
}

.search {
  margin: 0 64px;
  width: 100%;
}

.im-expanding {
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: nowrap; /* If you want to have your select label inline */
}

#select {
  width: 100px; /* OR min-width */
  transition: all 2s ease-in;
}

#select:focus {
  width: 200px; /* OR min-width */
}

<div class="container">
  <div class="logo">logo</div>
  <div class="search">
    <div class="search-box">
      <p>Search ...</p>
    </div>
  </div>
  <div class="im-expanding">
    <select id="select" name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    <div>
      more stuff here
    </div>
  </div>
</div>