title: Display radio and div elements in vertical way
body: <p>There's this structure of <code>radio</code> choices inside of a <code>form</code>.</p>
  
  <pre><code>&lt;div id="hier_all"&gt;
      &lt;h2 id="tit_hierarq" class="hierarq visible"&gt;Choose&lt;/h2&gt;
      &lt;h3 id="tit_hierarq_help" class="hierarq visible"&gt;one of the options&lt;/h3&gt;
      &lt;form id="form_hierarq" class="hierarq visible"&gt;
  
          &lt;input id="hierarq0" class="hierarq visible" type="radio" name="radioButHierarq" value="0"&gt;
          &lt;div id="hierarq0" class="hierarq visible"&gt;option 0&lt;/div&gt;
  
          &lt;input id="hierarq1" class="hierarq visible" type="radio" name="radioButHierarq" value="1"&gt;
          &lt;div id="hierarq1" class="hierarq visible"&gt;option 1&lt;/div&gt;
  </code></pre>
  
  <p>Right now, the sixteen choices there are to be shown (only two in the example) are displayed one next to another in a horizontal way.</p>
  
  <p>I'd like to have the <code>radio</code> input as well as the accompanying <code>div</code> to be placed side by side. The next ones should appear right below, and so on, in a vertical way.</p>
  
  <p>For <code>.hierarq</code>, tried to use <code>display: run-in</code>, but the elements are placed horizontally.
  With <code>display: list-item</code>, items are placed vertically, but although <code>javascript</code> adds <code>hidden</code> to the <code>class</code> of each element in <code>form</code> (and removes <code>visible</code>), the <code>radio</code> choices and their <code>div</code> remain visible after an option is chosen.
  If <code>display: block</code>, I get the same problem as with <code>display: list-item</code>.</p>
  
  <p>What should I do to solve this?</p>