HTML/CSS trying to size buttons so they are all the same size

Question

Trying to size these buttons so they all the same size.

    display: block;
    padding: 0 2rem;
    border: 1px solid 
#fff;
font-size: 12px;
color:
    #000000;
    height: 45px;
    line-height: 43px;
    margin: 5px;
}

Here is the css I am currently using what do I do to make them all the same size?

Answer 1

One possible solution is to wrap the buttons and add a max-width and then use flexbox to size them?

.buttons {
  display: flex;
  flex-direction: column;
  max-width: 200px;
}
button {
  border: 1px solid #000;
  padding: 1rem;
  margin-bottom: 10px;
  font-size: 1rem;
}

<div class="buttons">
  <button>$1234.123</button>
  <button>$234.123</button>
  <button>$124.3</button>
  <button>$14</button>
</div>