How to create question/answer columns with flexbox?

Question

I want the questions to be in a wide left column and the answer choices to all be in the slim right column. I am very new to Flexbox and have been learning/googling all day on this, and I can't find a solution I like.

My form also has situations before some questions and I would like that to be in the left column, too, but I still need the answers to be across from their corresponding question.

I've looked at links like this and this, but I'm not finding a good solution for my problem.

I have also looked at SO Questions CSS align one item right with flexbox and Creating a two column layout with flexbox.

<p>Example Situation</p>

<p id="question1">Question 1</p>

<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>

<p id="question2">Question 2</p>

<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>

score 1 · Answer 1 · answered Aug 05 '19 at 19:59

Is there any reason that a <table> element would not accomplish what you are trying to do? The structure of the questions / answers seem to fit the use.

table {
width:100%;
}
tr:first-child {
width:60%;
}

<p>Example Situation</p>
<table>
  <tr>
    <td>
      <p id="question1">Question 1</p>

      <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>
    </td>
    <td>
      Answer 1
    </td>
  </tr>

  <tr>
    <td>

      <p id="question2">Question 2</p>

      <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>
    </td>
    <td>
      Answer 2
    </td>
  </tr>
</table>

Depends on the case. The data format is tabular so I think it could be appropriate in this case. I would recommend CSS grid if you prefer not to use tables. Flex elements have no knowledge of the other element's content, so keeping things lined up would be difficult if the viewport changes in size. — Nathan Fries, Aug 05 '19 at 20:01

score 1 · Accepted Answer · edited Aug 05 '19 at 20:36

Have sketched out how I think you could do it using flexbox.

The question section will take up as much space as it can while the answer section has a fixed width.

It is unfortunately not possible to ensure horizontal alignment between two independent columns so have to create a row for each answer/question pair.

Can recommend looking for a library to simplify usage of flexbox. Have been using angularjs material for instance, am sure there are alternatives not targeting a specific framework.

.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;
  }
}

<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>

Edit: Added @media query to demonstrate responsiveness

https://jsfiddle.net/ojky49rb/1/

How to create question/answer columns with flexbox?

2 Answers2