How to add two radio buttons in a single row?

Solution 1:

here is the example how to solve your issue.

label {
  display: block;
  color: #7d7d7d;
}

.floatBlock {
  margin: 0 1.81em 0 0;
}

.labelish {
    color:#7d7d7d;
    margin: 0;
}

.paymentOptions {
    border: none;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    break-before: always;
    margin: 0 0 3em 0;
}

#purchaseOrder {
    margin: 0 0 2em 0;
}
 <p class="labelish">Payment Method:</p>
            <div id="paymentContainer" name="paymentContainer" class="paymentOptions">

                <div id="payCC" class="floatBlock">
                    <label for="paymentCC"> <input id="paymentCC" name="paymentType" type="radio" value="CREDIT_CARD" />  Credit Card  </label>
                </div>

                <div id="payInvoice" class="floatBlock">
                    <label for="paymentInv"> <input id="paymentInv" name="paymentType" type="radio" value="INVOICE" /> Invoice </label>
                </div>

                <div id="pay3rdParty" class="floatBlock">
                    <label for="payment3rd"> <input id="payment3rd" name="paymentType" type="radio" /> Third Party </label>
                </div>

            </div>

note: idea taken from codepen