HTML сломанный формат со скрытыми div

Question

Я пытаюсь собрать веб-форму для работы, чтобы после выбора из раскрывающегося списка правильные вопросы открывались для заполнения. Форма у меня работает, но форматирование у меня не в порядке. Я бы хотел, чтобы при отображении вопросов все было ровно ровно, без пробелов со скрытым текстом

Когда вы запускаете программу, вы можете видеть пробел между раскрывающимся списком и вопросами 49 и 50 (если возможно, я хотел бы устранить этот пробел), я также попытался скрыть целое div Если бы вы выбрали «Красный», он разделит вопрос на 3 части.

У меня есть пытался урезать код, насколько мог. Вот Fiddle

<!-- Main Content Area -->
<div class="main">
  <div class="row">
        <form> <!-- Form tag is only used to allow the Clear button at the bottom to clear the data entry area. -->
            <!-- Begin left side data entry -->
            <div class="cell" style="vertical-align: top; padding-top: 10px;">
                <div class="row">
                    <div class="cell">Color:</div>
                    <div class="cell">
                        <select id="Color" onChange="myWorkLog();myWorkLogs();store_value('Color',this.value);showQuest(this.options[this.selectedIndex].value);"> 
                            <option label=" "></option>
                            <option >Blue</option>
                            <option >Red</option>
                            <option >Green</option>
                            <option >Orange</option>
                            <option >Yellow</option>
                        </select>
                    </div>  
                </div>
                <!--  Blue Questions -->
                    <div class="row">
                         <div class="cell" id="Q1" style="display:none" >Question 1 Question 6 Question </div>
                         <div class="cell"><input type="text" id="A1" style="display:none" onChange="myWorkLog();myWorkLogs();" /></div>
                    </div>
                    <div class="row">
                         <div class="cell" id="Q2" style="display:none">Question 2</div>
                         <div class="cell"><input type="text" id="A2" style="display:none" onChange="myWorkLog();myWorkLogs();" /></div>
                    </div>
                <!--  Reds Questions -->
                <div class="cell" id="Reds" style="display:none">
                    <div class="row">
                         <div class="cell" >Question 7 may be longer than the rest</div>
                         <div class="cell"><input type="text" id="Q7" onChange="myWorkLog();myWorkLogs();" /></div>
                    </div>
                    <div class="row">
                         <div class="cell" >Question 8</div>
                         <div class="cell"><input type="text" id="Q8" onChange="myWorkLog();myWorkLogs();" /></div>
                    </div>
                </div>
                    <!--  Green Questions -->
                    <div class="row">
                         <div class="cell" id="Q3" style="display:none">Question 3</div>
                         <div class="cell"><input type="text" id="A3" style="display:none" onChange="myWorkLog();myWorkLogs();" /></div>
                    </div>
                    <div class="row">
                         <div class="cell"id="Q4" style="display:none">Question 4</div>
                         <div class="cell"><input type="text" id="A4" style="display:none" onChange="myWorkLog();myWorkLogs();" /></div>
                    </div>
                    <!--  Orange Questions -->
                    <div class="row">
                         <div class="cell" id="Q5" style="display:none">Question 5</div>
                         <div class="cell"><input type="text" id="A5" style="display:none" onChange="myWorkLog();myWorkLogs();" /></div>
                    </div>
                    <div class="row">
                         <div class="cell" id="Q6" style="display:none">Question 6</div>
                         <div class="cell"><input type="text" id="A6" style="display:none" onChange="myWorkLog();myWorkLogs();" /></div>
                    </div>
                    <!--  Yellow Questions -->
                    <div class="row">
                         <div class="cell" id="Q9" style="display:none">Question 5</div>
                         <div class="cell"><input type="text" id="A9" style="display:none" onChange="myWorkLog();myWorkLogs();" /></div>
                    </div>
                    <div class="row">
                         <div class="cell" id="Q10" style="display:none">Question 6</div>
                         <div class="cell"><input type="text" id="A10" style="display:none" onChange="myWorkLog();myWorkLogs();" /></div>
                    </div>
                <!--  Always needed Questions -->
                <div class="row">
                    <div class="cell">Question 49</div>
                    <div class="cell"><input type="text" id="Q49" onChange="myWorkLog();myWorkLogs();" /></div>
                </div>
                <div class="row">
                    <div class="cell">Question 50</div>
                    <div class="cell"><input type="text" id="Q50" onChange="myWorkLog();myWorkLogs();" /></div>
                </div>
                <div class="row">
                    <div class="cell">&nbsp;</div>
                    <div class="cell" style="text-align: center;"><input type="reset" value="Clear" /></div>
                </div>
            </div>
        </form>
    </div>
</div>

JavaScript для отмены скрытия

document.getElementById('Color').addEventListener('change', function() {

    var style = this.value == 'Blue' ? 'block' : 'none'
    document.getElementById('Q1').style.display = style;
    document.getElementById('Q2').style.display = style;
    document.getElementById('A1').style.display = style;
    document.getElementById('A2').style.display = style;


    var style = this.value == 'Red' ? 'block' : 'none'
        document.getElementById('Reds').style.display = style;

    var style = this.value == 'Green' ? 'block' : 'none'
    document.getElementById('Q3').style.display = style;
    document.getElementById('Q4').style.display = style;
    document.getElementById('A3').style.display = style;
    document.getElementById('A4').style.display = style;

    var style = this.value == 'Orange' ? 'block' : 'none'
    document.getElementById('Q5').style.display = style;
    document.getElementById('Q6').style.display = style;
    document.getElementById('A5').style.display = style;
    document.getElementById('A6').style.display = style;

    var style = this.value == 'Yellow' ? 'block' : 'none'
    document.getElementById('Q9').style.display = style;
    document.getElementById('Q10').style.display = style;
    document.getElementById('A9').style.display = style;
    document.getElementById('A10').style.display = style;
});

Если это невозможно с тем способом, которым я пытаюсь построить это, я приветствую любые предложения, которые я могу изучить, чтобы получить мой конечный продукт. Заранее благодарю