How to get VoiceOver screen reader to work with radio buttons, to say proper number of choices - radio-button

Question

When using VoiceOver, Apple's screen reader for iPad, on the following radio button group, it reads them as, "Nominal, radio button, unchecked 1 of 1". I want it to read it as, "Nominal, radio button, unchecked 1 of 3", to reflect the proper number of choices.
.col-md-12 {
background-color: white;
padding: 1em;
margin: 1em;
}
input.radio-float {
float: left;
padding-right: 1em;
}
label.radio-float {
max-width: 24em;
padding-left: 1em;
color: maroon;
}
span.radio-float {
max-width: 24em;
padding-left: 2em;
color: gray;
display: block;
}
<div class="col-md-12 form-inline">
<fieldset id="FilterLevel">
<legend>Please choose a filter level</legend>
<input class="radio-float" id="FilterLow" name="FilterLevel" required="required" type="radio" value="LOW">
<label for="FilterLow" class="radio-float">Nominal:</label>
<br>
<span class="radio-float">This level will catch most, but not all incoming spam. It is the safest selection if you are concerned about legitimate mail being inadvertently intercepted.</span>
<br>
<input checked="checked" class="radio-float" id="FilterMedium" name="FilterLevel" type="radio" value="MEDIUM">
<label for="FilterMedium" class="radio-float">Aggressive:</label>
<br>
<span class="radio-float">More spam will be caught. There is a slight chance that legitimate mail may be blocked.</span>
<br>
<input class="radio-float" id="FilterHigh" name="FilterLevel" type="radio" value="HIGH">
<label for="FilterHigh" class="radio-float">Very Aggressive:</label>
<br>
<span class="radio-float">This level should catch almost all spam. However, there is an increased risk that legitimate mail may be blocked. Use with care.</span>
</fieldset>
</div>
The problem is that everything I try to keep the <span class="radio-float"> indented seem to break VoiceOver's ability to identify the number of options in the radio group.
Any ideas on what causes VoiceOver to go from "1 of 1" to "1 of 3"?
For bonus points, can you think of a way to make VoiceOver happy and keep the indentation?

Answer 1

The problem seems to be the "display: block". When VoiceOver hits this, it's seeing it as essentially a "wall", and doesn't look past it to detect that there are other radio buttons in the group. Changing this to "display: inline-block" however remedies this, and still allows you to apply your padding/margin to the left of the description.