title: Vertically align the radio buttons and text
body: <p>I'm trying to make the following styles coexist in my code to apply them to the radio buttons, but I can’t get them both to work at the same time.</p>
  
  <p>This is with both: <code>display:flex;</code> and <code>vertical-align: baseline;</code></p>
  
  <p><a href="https://i.stack.imgur.com/A45bq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A45bq.png" alt="enter image description here"></a></p>
  
  <p>This is without: <code>display:flex;</code> but with <code>vertical-align: baseline;</code></p>
  
  <p><a href="https://i.stack.imgur.com/tinas.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tinas.png" alt="enter image description here"></a></p>
  
  <p>I have tried with <code>display:flex;</code> <code>align-items: center;</code> but it doesn't work either:</p>
  
  <p><a href="https://i.stack.imgur.com/iLMdv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iLMdv.png" alt="enter image description here"></a></p>
  
  <p>Apparently, I cannot keep the 2 styles on the radio buttons. I have tried to use other kind of styles but they don’t work as I want. 
  I would like to vertically align the radio buttons with their labels and text on the same line as in the first image. can you help me get it?</p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;?php
  if ($row["type"] == 0) {
  
      $ansarray = explode("\n", $row["image_path"]);
      $randomans = [];
      for($i=0; $i&lt;count($ansarray); $i++) {
          $a = array($i+1, $ansarray[$i]);
          array_push($randomans, $a);
      }
      shuffle($randomans);
      for($i=0; $i&lt;count($randomans); $i++) {
          echo "&lt;div style=\"text-align:left; display:flex; vertical-align: baseline;\"&gt;";
          echo "&lt;input type=\"radio\" name=\"choice".$row["exercise_id"]."\" value= \"".$randomans[$i][0]."\"  /&gt;".$randomans[$i][1]."&lt;br&gt;";
          echo "&lt;/div&gt;";
      }
  
      echo "&lt;input type=\"text\" name=\"choicetext".$row["exercise_id"]."\" value='multi' style=\"display:none;\"&gt;";
  
  } else {
      ?&gt;
      &lt;input type="radio" name="choice&lt;?php echo $row["exercise_id"] ?&gt;" value= "0" checked="checked" style="display:none;" /&gt;
  
      &lt;?php
  }
  ?&gt;
  </code></pre>
  
  <p>This is a small example of what I have: Radio buttons inside a table.
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  table {
    border-collapse: collapse;
    width: 40%;
  }
  
  td, th {
    border: 1px solid #dddddd;
    text-align: left;  
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;form action=""&gt;
      
    &lt;input type="radio" name="gender" value="English"&gt; English is a West Germanic language that was first spoken in early medieval England.&lt;br&gt;
    &lt;input type="radio" name="gender" value="third"&gt; English is the third most-spoken native language in the world, after Standard Chinese and Spanish.&lt;br&gt;
    &lt;input type="radio" name="gender" value="other"&gt; Other
  &lt;/form&gt;&lt;/td&gt;  
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>