How to align the button horizontally using flex?

Question

I need the other two buttons to align with the button after the longest text.
Button 1 & 2 to align with Button 3 from the code. ..........................................................

.box {
  display: flex;
  align-items: stretch;
  background-color: yellow;
}

.item {
  border: 5px solid red;
}

<div class="box">
  <div class="item">
    <div>
      One
    </div>
    <button>
      1
    </button>
  </div>
  <div class="item">
    <div>
      Two
    </div>
    <button>
      2
    </button>
  </div>
  <div class="item">
    <div>
      Three
      <br>has
      <br>extra
      <br>text
    </div>
    <button>
      3
    </button>
  </div>
</div>