Radio box, label text to the right in CSS

August 26, 2022

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" class="label_radio">
<input class="radio_check" 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>

>Solution :

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 class="d-flex">
  <input class="radio_check" type="radio" name="confirm_box" />
  <label for="confirm_box" class="label_radio">
    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>