HTML Form Organized in Rows

I am trying to prepare an html form that requires a layout into up to 4 distinct rows. See code below with notes. Basically, I am looking for the first 3 form items to be on row 1. The next 3 on row 2, etc. Each item should be spread out from the others. I used 3 column sizing since each text box is expecting relatively short input (one word).

Boxes 3 through 8 (rows 2 and 3) are toggled on and off depending on the select option. If toggled off, there are only 2 rows (first 3 items = row 1, button = row 2).

When I add class="row", the form items mash up against each other and when type 2 is selected, it gets even more out of whack since 6 additional boxes are added to the mess.

Using bootstrap 4

Is the row class in the correct place? Is there another class i should use? I am new to all this, so any help on getting this form set up to the right specs would be appreciated.

<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>