Button not clicking while leaving textarea focus

Question

I have a message space with the response field nice and small at the bottom. When the user clicks in, it expands. However, when focused, if I then go to click my button, it looses focus - as expected, but the button isn't triggered, I have to click it again. How can I best resolve this?

.wrap {
  align-items: center;
  display: flex;
  justify-content: flex-end;
}

textarea {
  height: 40px;
  width: 100%;
  transition: height .2s ease;
}

textarea:focus {
  height: 150px;
}

.fancy-button {
  background-color: red;
  cursor: pointer;
  margin-left: 20px;
  height: 30px;
  width: 30px;
}

<div class="wrap">
   <textarea></textarea>
   <div class="fancy-button" onclick="alert('click');">
</div>

Answer 1

I think the issue is that when you click, the button is not technically in this place but only visually. If you add a wrapper that cover all the space you may be able to catch the click from the first time.

While you are having the fast transition the browser is calculating and updating the position of the button; thus your click is outside the area of the button.

You may also notice in this solution that if you click below the button the alert may not be triggered because of the same reasons. The wrapper is having its height decreasing rapidly and the click may be outside.

.wrap {
  display: flex;
}

textarea {
  height: 40px;
  width: 100%;
  transition: height .2s ease;
}

textarea:focus {
  height: 150px;
}
.wrap > div {
   display: flex;
   align-items:center;
}
.fancy-button {
  background-color: red;
  cursor: pointer;
  margin-left: 20px;
  height: 30px;
  width: 30px;
}

<div class="wrap">
  <textarea></textarea>
  <div onclick="alert('click');">
    <div class="fancy-button" >
    </div>
  </div>
</div>

And if you only decrease the transition time you may also be able to catch the click the first time:

.wrap {
  display: flex;
  align-items: center;
}

textarea {
  height: 40px;
  width: 100%;
  transition: height 2s ease;
}

textarea:focus {
  height: 150px;
}

.fancy-button {
  background-color: red;
  cursor: pointer;
  margin-left: 20px;
  height: 30px;
  width: 30px;
}

<div class="wrap">
  <textarea></textarea>
  <div onclick="alert('click');" class="fancy-button">
  </div>
</div>

You can also keep the duration and add a delay:

.wrap {
  display: flex;
  align-items: center;
}

textarea {
  height: 40px;
  width: 100%;
  transition: height .2s ease;
  transition-delay:0.1s;
}

textarea:focus {
  height: 150px;
  transition-delay:0s;
}

.fancy-button {
  background-color: red;
  cursor: pointer;
  margin-left: 20px;
  height: 30px;
  width: 30px;
}

<div class="wrap">
  <textarea></textarea>
  <div onclick="alert('click');" class="fancy-button">
  </div>
</div>