JSFiddle - React, Tailwind, and code Playground

HTML

<div class="qa">
  <div class="question">
    <p id="question1">Question 1</p>
  </div>
  <div class="answer">
    <input type="radio" name="question1" id="yes1" value="yes">
    <label for="yes1">Yes</label>
    <input type="radio" name="question1" id="no1" value="no">
    <label for="no1">No</label>
  </div>
</div>
<div class="qa">
  <div class="question">
    <p id="question2">Question 2</p>
  </div>
  <div class="answer">
    <input type="radio" name="question2" id="yes2" value="yes">
    <label for="yes2">Yes</label>
    <input type="radio" name="question2" id="no2" value="no">
    <label for="no2">No</label>
  </div>
</div>

CSS

.qa {
  display: flex;
  flex-direction: row;
}

.question {
  flex-grow: 100;
  align-self: center;
  background: red;
}

.answer {
  flex: none;
  align-self: center;
  min-width: 200px;
  background: blue;
}

@media (max-width: 600px) {
  .qa {
     flex-direction: column;
  }
  .question {
    align-self: flex-start;
  }
  .answer {
      flex: 0 1 auto;
      align-self: flex-start;
  }
}