Formulaire HTML organisé en lignes

J'essaie de préparer un formulaire html qui nécessite une mise en page jusqu'à 4 lignes distinctes. Voir le code ci-dessous avec des notes. Fondamentalement, je recherche les 3 premiers éléments du formulaire sur la ligne 1. Les 3 suivants sur la ligne 2, etc. Chaque élément doit être réparti par rapport aux autres. J'ai utilisé le dimensionnement de 3 colonnes car chaque zone de texte attend une entrée relativement courte (un mot).

Les cases 3 à 8 (lignes 2 et 3) sont activées et désactivées en fonction de l'option sélectionnée. S'il est désactivé, il n'y a que 2 lignes (3 premiers éléments = ligne 1, bouton = ligne 2).

Lorsque j'ajoute class = "row", les éléments du formulaire se mélangent les uns contre les autres et lorsque le type 2 est sélectionné, cela tire encore plus parti du fait que 6 boîtes supplémentaires sont ajoutées au mess.

Utilisation de bootstrap 4

La classe de ligne est-elle au bon endroit? Y a-t-il une autre classe que je devrais utiliser? Je suis nouveau dans tout cela, donc toute aide pour obtenir ce formulaire configuré selon les bonnes spécifications serait appréciée.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function() {
        $("#conj").hide();
        $("#type").on("change", function() {
            if ($(this).val() === "addl") {
                $("#conj").show();
            }
            else {
                $("#conj").hide();
            }
        });
    });
</script>

<h1 align="left">Dev Env - Test 110319C</h1>
<form action="/addvocab" method="post" class="form-inline">

    <!-- Box 1, box 2 and select menu on row 1 -->
    <div class="row">
        <div class="form-group col-sm-3">
            <input autocomplete="off" autofocus class="form-control" name="box1" placeholder="Box 1" type="text">
        </div>
        <div class="form-group col-sm-3">
            <input autocomplete="off" class="form-control" name="box2" placeholder="Box 2" type="text">
        </div>
        <div class="form-group col-sm-3">
            <select id="type" class="form-control" name="part">
                <option disabled selected value="">Type</option>
                <option>Type 1</option>
                <option value="addl">Type 2</option>
                <option>Type 3</option>
                <option>Type 4</option>
                <option>Type 5</option>
                <option>Type 6</option>
                <option>Type 7</option>
            </select>
        </div>
    </div>

    <div>

        <!-- Boxes 3 through 8 only show if select option TYpe 2 is selected -->
        <label id="conj">

            <!-- Boxes 3, 4 and 5 on row 2 if visible -->
            <div class="row">
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box3" placeholder="Box 3" type="text">
                </div>
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box4" placeholder="Box 4" type="text">
                </div>
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box5" placeholder="Box 5" type="text">
                </div>
            </div>


            <!-- Boxes 6, 7 and 8 on row 3 if visible -->
            <div class="row">
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box6" placeholder="Box 6" type="text">
                </div>
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box7" placeholder="Box 7" type="text">
                </div>
                <div class="form-group col-sm-3">
                    <input autocomplete="off" autofocus class="form-control" name="box8" placeholder="Box 8" type="text">
                </div>
            </div>

        </label>
    </div>

    <!-- Button on row 2 if boxes 3 through 8 are not visible. On row 4 if visible -->
    <div class="row">
        <button class="btn btn-primary col-xs-6" type="submit">Add Word</button>
    </div>

</form>