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