How to add two radio buttons in a single row?-CodePudding

I want to add two radio buttons in as single row with label, as shown in the photo, ow can I achieve this??

requirement

CodePudding user response：

you need display: flex; for this:

.container {
  display: flex;
  justify-content: space-around;
}

.radio-container {
  display: flex;
  align-items: end;
  margin-right: 15px;
}

.radio-group {
  display: flex;
  flex-direction: column;
}

.input {
  display: flex;
  flex-direction: row;
}

<div >
  <div >
    <p>radioss 1</p>
    <div >
      <div >
        <input type="radio" id="radio1" name="group1" />
        <label for="radio1">radio 1</label>
      </div>
      <div >
        <input type="radio" id="radio2" name="group1" />
        <label for="radio2">radio 2</label>
      </div>
    </div>
  </div>
  <div >
    <p>radioss 2</p>
    <div >
      <div >
        <input type="radio" id="radio1" name="group2" />
        <label for="radio1">radio 1</label>
      </div>
      <div >
        <input type="radio" id="radio2" name="group2" />
        <label for="radio2">radio 2</label>
      </div>
    </div>
  </div>
  <div >
    <p>radioss 3</p>
    <div >
      <div >
        <input type="radio" id="radio1" name="group3"/>
        <label for="radio1">radio 1</label>
      </div>
      <div >
        <input type="radio" id="radio2" name="group3"/>
        <label for="radio2">radio 2</label>
      </div>
    </div>
  </div>

</div>

CodePudding user response：

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 >Payment Method:</p>
            <div id="paymentContainer" name="paymentContainer" >

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

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

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

            </div>

note: idea taken from codepen