<script type="text/javascript" data-author="Tony Partner">    
    $(document).ready(function() {
 
        // The number of questions to wrap in the flex container
        var numberQuestions = 2;
 
        // Identify the questions
        var thisQuestion = $('#question{QID}');        
        var rowQuestions = thisQuestion.add(thisQuestion.nextAll('.question-container:lt('+(numberQuestions-1)+')'));
 
        // Wrap the questions in a <div> element
        rowQuestions.wrapAll('<div class="question-flex-container" />');
    });
</script>

<style type="text/css">@media only screen and (min-width: 576px) {    
        .question-flex-container {
            display: flex;
            justify-content: space-evenly;
        }
.flex-layout.question-container {     width:100%;  
    }
</style>

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    // Identify the questions
    var thisQuestion = $('#question'+{QID}+'');
    var nextQuestion1 = $(thisQuestion).nextAll('.text-short:eq(0)');
    var nextQuestions = $(nextQuestion1);
    var nextLength = nextQuestions.length;
    var sqLength = ('tr.answers-list', thisQuestion).length;
 
    // Hide the short-text questions
    $(nextQuestions).hide();
 
    // Move the hidden text inputs into the array
    for (i = 0; i < nextLength; i++) {
        var workingIndex = (sqLength - 1) - (nextLength - i);
        var nextQ = nextQuestions[i];
        $('th.answertext:eq('+workingIndex+')', thisQuestion).append($('input[type="text"]', nextQ)).closest('tr').addClass('otherRow');
    }
 
// Some styling...
    $('input[type="text"]', thisQuestion).css({
        'width': '100%'
    });
});
</script>[/i]