Flex-Anordnung von eingabfelden

[kaysiebke]

Guten Tag an die Gemeinde!
Ich habe eine Frage, da ich mit der Flex Funktion nicht ganz warm werde !
Und zwar habe ich 4 eingab Felder, die ich untereinander angeordnet habe(SKU, Beschreibung, Farbe, Größe).
Nun möchte ich die Letzten zwei eingab Felder (Farbe, Größe gern nebeneinander anordnen. Wie stelle ich das inzwischen in der CSS regel, an das ich dies nebeneinander bekomme?

<style>
        /* Anordnung der Buttons */
        .btn-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 0.5em;
        }
        #btnPrint {
            grid-column: 2/3;
            grid-row: 1/3;
        }
        #btnSubmit {
            grid-column: 1/2;
            grid-row: 1/2;
        }
        #btnReset {
            grid-column: 1/2;
            grid-row: 2/3;
        }
    </style>

  </div>
            <form id="itemForm" autocomplete="off">
                <label for="sku">SKU:</label>
                <input type="search" id="sku" name="sku">
                <label for="description">Description:</label>
                <input type="search" id="description" name="description">
                <div class="flexitem-1">
                <label for="color">Color:</label>
                <input type="search" id="color" name="color">
                <div class="flexitem-2">
                <label for="size">Size:</label>
                <input type="search" id="size" name="size">
                <div class="btn-container">
                    <button id="btnPrint" class="button" type="button" value="Print" onclick="window.print()">Drucken
                    </button>
                    <button id="btnSubmit" class="button" type="button" value="Submit" onclick="submitForm()">
                    </button>
                    <button id="btnReset" class="button" type="reset" value="Reset">
                    </button>
                </div>