Radio box, label text to the right in CSS-CodePudding

How do i move the text to the right side of a radio box even tho its more than one line?

Like this : Example

Html looking like this:

<label for="confirm_box" >
<input  type="radio" name="confirm_box" />
Yes, sign me up for the Newsletter. I confirm I am over 16 years old. I agree to
Privacy Policy <a href="#">here.</a>
</label>

CodePudding user response：

move the input out of the label and wrap them with a container that uses Flexbox. To have the input at the top instead of the vertical center, you can use align-self: flex-start on the input. To space them apart you can use the gap-property.

.d-flex {
  display: flex;
  gap: 5px;
}

.d-flex input {
  align-self: flex-start;
}

<div >
  <input  type="radio" name="confirm_box" />
  <label for="confirm_box" >
    Yes, sign me up for the Newsletter. I confirm I am over 16 years old. I agree to
Privacy Policy <a href="#">here.</a>
  </label>
</div>