Radio buttons and checkboxes break when label text wraps (e.g. on a mobile display)

[jonathanconway]

Bug - Radio buttons and checkboxes break when label text wraps (e.g. on a mobile display)

What I did

I built a radio-button-list, using markup similar to the following:

<form>
  <fieldset>
    <div>
      <input type="radio" id="x" name="x">
      <label for="x">This is some text that will wrap when the screen size is reduced to the equivalent of a mobile display width. When this happens, the little black dot inside the circle will drop out.</label>
      <input type="radio" id="y" name="y">
      <label for="y">Blah blah</label>
    </div>
  </fieldset>
</form>

What browser and device I was using

Chrome, MacOS 10.12.3

What I expected to see

The little black dot inside the circle.

What I saw

The little black dot outside the circle.