Add this script to the first question of each pair you want to display side-by-side. Note that some of the selectors and styles in this script are specific to the default template so may need to be changed for other templates.
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Identify the questions
var thisQuestion = $('#question{QID}');
var nextQuestion = $(thisQuestion).nextAll('div[id^="question"]:eq(0)');
var theseQuestions = $(thisQuestion).add(nextQuestion);
// Place the questions side-by side
$(theseQuestions).wrapAll('<div style="width:75%; margin: 0 auto" />');
theseQuestions.css({
'float': 'left',
'width': '50%'
});
$('> table', theseQuestions).css({
'width': '100%'
});
// Some styling for the textareas
$('textarea', theseQuestions).removeAttr('cols').css({
'margin-left': '0',
'margin-right': '0',
'width': '100%'
});
// Equalize heights
if($(thisQuestion).is(':hidden')) {
$(theseQuestions).css({
'position': 'absolute',
'left': '-9999em'
}).show();
equalizeHeights();
$(theseQuestions).css({
'position': 'relative',
'left': 'auto'
}).hide();
}
else {
equalizeHeights();
}
function equalizeHeights() {
var questionTextHeight = 0;
$('td.questiontext', theseQuestions).each(function(i) {
if($(this).height() > questionTextHeight) {
questionTextHeight = $(this).height()
}
$('td.questiontext', theseQuestions).height(questionTextHeight);
});
var answerHeight = 0;
$('td.answer', theseQuestions).each(function(i) {
if($(this).height() > answerHeight) {
answerHeight = $(this).height()
}
$('td.answer', theseQuestions).height(answerHeight);
});
var helpHeight = 0;
$('td.survey-question-help', theseQuestions).each(function(i) {
if($(this).height() > helpHeight) {
helpHeight = $(this).height()
}
$('td.survey-question-help', theseQuestions).height(helpHeight);
});
}
});
</script>
Here is an abbreviated version of your survey with the script in the source of questions 2 and 5:
I just wanted to show how the code is displaying the questions (without paying attention to the logic). 
