title: Aligning radio button's vertically with CakePHP 4
body: <p><strong>My issue</strong></p>
  <p>I am using the cakephp 4 FormHelper to create some radio buttons on my page. It will create the radio buttons, however it will display them horizontally like in the image below but I want them to be displayed vertically.</p>
  <p><a href="https://i.stack.imgur.com/X9Lwg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X9Lwg.png" alt="What it currently looks like" /></a></p>
  <p><strong>My code</strong></p>
  <p>index.php:</p>
  <pre><code>    &lt;div class=&quot;meetingRadioBox&quot;&gt;
        &lt;?php 
          echo $this-&gt;Form-&gt;label('location', 'Location:', ['class' =&gt; 'meetingLabel']);
          echo &quot;&lt;/br&gt;&quot;;
        ?&gt;
        &lt;div class=&quot;separatorLine&quot;&gt;&lt;/div&gt; 
        &lt;?php
          echo $this-&gt;Form-&gt;radio('location',
            [
              ['value' =&gt; 'LocationA', 'text' =&gt; 'Location A'],
              ['value' =&gt; 'LocationB', 'text' =&gt; 'Location B'],
            ],
            ['class' =&gt; 'meetingRadio', 'required' =&gt; 'true']
          );
          echo &quot;&lt;/br&gt;&quot;;
          echo $this-&gt;Form-&gt;label('host', 'Gesprek met:', ['class' =&gt; 'meetingLabel']);
          echo &quot;&lt;/br&gt;&quot;;
        ?&gt;
      &lt;/div&gt;
  </code></pre>
  <p>index.css:</p>
  <pre><code>    .meetingRadio{
        font-weight: normal;
        width: 40px;
        height: 20px;
        vertical-align: middle;
      }
  
      .meetingRadioBox{
        padding-bottom: 20px;
      }
  
      .meetingRadioBox{  
        border-top: 1px solid #C4C4C4;
        margin-bottom: 15px;
      }
  
      .meetingLabel{
         text-align: left;
         font: normal normal bold 16px/38px Open;
         font-family: sans-serif;
         letter-spacing: 0px;
         width: 50%;
         padding-top: 20px;
         color: #1D1D1B;
         opacity: 1;
       }
  </code></pre>
  <p>what the html looks like when inspecting the page in chrome:</p>
  <pre><code>    &lt;div class=&quot;meetingRadioBox&quot;&gt;
        &lt;label class=&quot;meetingLabel&quot; for=&quot;location&quot;&gt;Location:&lt;/label&gt;&lt;br&gt;
        &lt;div class=&quot;separatorLine&quot;&gt;&lt;/div&gt; 
        &lt;input type=&quot;hidden&quot; name=&quot;location&quot; value=&quot;&quot;&gt;
        &lt;label for=&quot;location-locationa&quot;&gt;
          &lt;input type=&quot;radio&quot; name=&quot;location&quot; value=&quot;LocationA&quot; id=&quot;location-locationa&quot; required=&quot;required&quot; class=&quot;meetingRadio&quot;&gt;
            Location A
        &lt;/label&gt;
        &lt;label for=&quot;location-locationb&quot;&gt;
          &lt;input type=&quot;radio&quot; name=&quot;location&quot; value=&quot;LocationB&quot; id=&quot;location-locationb&quot; required=&quot;required&quot; class=&quot;meetingRadio&quot;&gt;
            Location B
        &lt;/label&gt;
        &lt;br&gt;
      &lt;/div&gt;
  </code></pre>
  <p><strong>What i have already tried</strong></p>
  <p>One other post i looked at was this one:
  <a href="https://stackoverflow.com/questions/65609715/display-cakephp-radio-buttons-vertically">Display CakePHP Radio Buttons vertically</a>
  I tried to use the same solution in CakePHP 4 like below but this didn't work for me</p>
  <pre><code>    echo $this-&gt;Form-&gt;radio('location',
        [
          ['value' =&gt; 'LocationA', 'text' =&gt; 'Location A'],
          ['value' =&gt; 'LocationB', 'text' =&gt; 'Location B'],
        ],
        ['class' =&gt; 'meetingRadio', 'required' =&gt; 'true', 'before' =&gt; '&lt;div&gt;', 'separator' =&gt; '&lt;/div&gt;&lt;div&gt;', 'after' =&gt; '&lt;/div&gt;']
      );
  </code></pre>
  <p>I also tried adding an {display: block;} to my css but as you can see in the image below this only made it worse</p>
  <pre><code>    .meetingRadio{
        font-weight: normal;
        width: 40px;
        height: 20px;
        vertical-align: middle;
        display: block;
      }
  </code></pre>
  <p>after changing the css:
  <a href="https://i.stack.imgur.com/Djz97.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Djz97.png" alt="enter image description here" /></a></p>
  <p>I did manage to make it align vertically correctly but the problem here is that only the bottem radio button works and when i select the top option before submitting the request in my controller is empty</p>
  <p>non-functional index.php:</p>
  <pre><code>    echo $this-&gt;Form-&gt;radio('location',
        [['value' =&gt; 'LocationA', 'text' =&gt; 'Location A'],],
        ['class' =&gt; 'meetingRadio', 'required' =&gt; 'true']
      );
      echo &quot;&lt;/br&gt;&quot;;
      echo $this-&gt;Form-&gt;radio('location',
        [['value' =&gt; 'LocationB', 'text' =&gt; 'Location B'],],
        ['class' =&gt; 'meetingRadio', 'required' =&gt; 'true']
      );
      echo &quot;&lt;/br&gt;&quot;;
  </code></pre>
  <p>Any help is appreciated,</p>
  <p>thanks!</p>