Add fields side-by-side in LWC (CSS)

I have an HTML code where I want the place the fields side-by-side. Whereas, now it is getting stacked horizontally.

<lightning-card key={Treatment}>
   <p key={Treatment}><b class="slds-align_absolute-center" key={Treatment}>Treatment </b></p>
   <template key={Treatment} for:each={Treatment.value} for:item="TreatmentWithProducts">
      <p key={Treatment}><b key={Treatment}>   Product {TreatmentWithProducts.key}</b></p>
      <lightning-record-edit-form key={Treatment} object-api-name="Ag_Treatment__c">
         <template key={TreatmentWithProducts} for:each={TreatmentWithProducts.value} for:item="Product">
            <!-- <div key={Product} > -->
            <lightning-layout key={Product}>
               <lightning-layout-item key={Product} size="6">
                  <lightning-input-field key={Product} field-name={Product}> </lightning-input-field> <!-- This is the line which renders fields on screen -->
               </lightning-layout-item>
            </lightning-layout>
            <!-- </div> -->
         </template>
      </lightning-record-edit-form>
   </template>
   <lightning-button key={Treatment} data-id={Treatment.key} label="Add Prodcuts" title="Add Prodcuts" onclick={addProductRow} icon-name="action:new">
   </lightning-button>
</lightning-card>

I have truncated the code for brevity.

I want Product 1 and Product 1 Rate fields to be aligned horizontally (side-by-side/ as 2 columns). These fields are getting rendered from lightning-edit-record-form line. (Added a comment too). Any help is appreciated.