radio button flow layout

this layout works in safari and firefox, but not in chrome. Chrome renders the radio buttons in different rows

HTML

<div class='columnLayout'>
  <h2>HEADER</h2>
  <fieldset id='dummy' class='buttonsRow'>
    <div class='buttonContainer'>
      <input type='radio' id='0' name='0' value='0' />
      <label for='0'>0</label>
    </div>
    <div class='buttonContainer'>
      <input type='radio' id='1' name='1' value='1' />
      <label for='1'>1</label>
    </div>
    <div class='buttonContainer'>
      <input type='radio' id='2' name='2' value='2' />
      <label for='2'>2</label>
    </div>
  </fieldset>
</div>

CSS

.buttonsRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  border: none;
  padding: 2rem 0rem;
}

.buttonContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.buttonContainer > input {
    width: auto;
}