title: Is it possible to use CSS to group radio buttons rendered by RadioButtonList with their labels?
body: <p>We're working with a CMS (Kentico) which internally uses an ASP.NET webforms <code>RadioButtonList</code> to render radio buttons on custom forms. Via the CMS we can still control the <code>RepeatDirection</code> and <code>RepeatLayout</code> properties of this control but little else.</p>
  
  <p>The requirement is to display the radios horizontally so <code>RepeatDirection</code> <strong>Horizontal</strong> and <code>RepeatLayout</code> <strong>Flow</strong> achieves this. However the rendered markup is just an alternating list of <code>&lt;input /&gt;</code> and <code>&lt;label /&gt;</code> elements.</p>
  
  <p>The problem arises at narrow device widths when the radio button list starts to wrap. The <code>&lt;input /&gt;</code> and <code>&lt;label /&gt;</code> elements wrap individually so you lose the visual grouping between control and label. </p>
  
  <p>Since we can't affect the markup directly, what option do we have to simulate an HTML grouping? I fear this may be a JS-only solution which I'd like to avoid if possible.</p>