Vertical alignment of text with sequence of radio buttons within a table

Question

I am trying to create a simple feedback section where users can answer simple Yes/No questions with a click of a button. So basic radio functionality but want to disguise them as buttons for aesthetic.

In order to structure them positionally, I've inserted the text and buttons as elements in a table - however, the text is aligned with the bottom of the buttons, when it would look much cleaner if they were centrally aligned across the row.

I've done as much research as I can and tried various combinations of flex, vertical-align etc. but whichever way I try it, doesn't have the desired effect. Vertical align, I appreciate, has its intricacies, but I can't get my head around them to the point where I can solve this issue. I can get the text to line up centrally with the first button but then the other button positions itself below the first one, rather than side-by-side.

I appreciate there are plenty of questions on articles here and elsewhere on this kind of problem but none of the solutions I've found seem to apply to my particular case, i.e. text on one side, multiple radios disguised as switch buttons on the other. I just can't seem to find the right combination of attributes and/or the right containers to apply them to.

Pure HTML / CSS desired if at all possible!

Thanks!

h5 { font-size:16px; text-align: left; font-family: Calibri; font-weight: normal; color:#8211bf;}

.switch-field {
  display: flex;
  margin-bottom: 36px;
  overflow: hidden;
  }

.switch-field input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}

.switch-field label {
  background-color: #e4e4e4;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  line-height: 1;
  text-align: center;
  padding: 8px 16px;
  margin-right: -1px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.1s ease-in-out;
}

.switch-field label:hover {
  cursor: pointer;
}

.switch-field input:checked + label {
  background-color: #a5dc86;
  box-shadow: none;
}

.switch-field label:first-of-type {
  border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
  border-radius: 0 4px 4px 0;
}

<table>
  <tr>
    <td>
      <h5>Was this helpful?</h5>
    </td>
    <td>
      <div class="switch-field">
        <input type="radio" id="radio-helpful-yes" name="switch-helpful" value="yes" />
        <label for="radio-helpful-yes">Yes</label>
        <input type="radio" id="radio-helpful-no" name="switch-helpful" value="no" />
        <label for="radio-helpful-no">No</label>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <h5>Were the instructions easy to understand & follow?</h5>
    </td>
    <td>
      <div class="switch-field">
        <input type="radio" id="radio-easy-yes" name="switch-easy" value="yes" />
        <label for="radio-easy-yes">Yes</label>
        <input type="radio" id="radio-easy-no" name="switch-easy" value="no" />
        <label for="radio-easy-no">No</label>
      </div>
    </td>
  <tr>
</table>

Answer 1

This will fix your problem. make display flex to inline in below css class

.switch-field {
  display: inline;
  margin-bottom: 36px;
  overflow: hidden;
}