My webpage features 2 columns: The first column displays questions along with their previous answers, while the second column also shows the same questions but with input fields for new answers. This setup is designed for comparison purposes.
However, due to the additional space occupied by the input fields, the questions in the two columns are not aligned at the same level. The divs with questions from the first column take up less space compared to the divs with questions from the second column.
Is there a way to make the questions align at the same level without setting a fixed height for each question block?
Currently, my idea is to set a height for each question block. Are there any other solutions that could be more efficient?
Thank you for your help.
Here is the current code snippet:
Code :
This main div contains different categories of questions.
<div class="row">
<div id="pnlSubmissionCategoryQuestions" class="col-md-6">...</div>
<div id="pnlAmendmentCategoryQuestions" class="col-md-6">...</div>
</div>
http://jsfiddle.net/5vjmtozu/ Here is the complete code (please adjust the width of the result to see the two columns and the alignment issue).