Make form label text wrap around embedded 'checkbox' input, or simulate that somehow?

The label:

<label className="agmt_label" htmlFor="agreement">
  <input
    // className="preApproval_input"
    type="checkbox"
    name="agreement"
    id="agreement"
    checked={formData.agreement}
    onChange={handleAgreementChange}
  />
 By entering your phone number you agree to be
  contacted via SMS for information, offers, and advertising.
  We will NEVER spam you and you can opt-out of our messages
  at any time. Message & data rates apply. Message frequency
  varies. I have read and agree to the Terms and Conditions,
  Consent to Electronic Communications, and the Company
  Privacy Notice.
</label>

<label className="agmt_label" htmlFor="agreement">
  <input
    // className="preApproval_input"
    type="checkbox"
    name="agreement"
    id="agreement"
    checked={formData.agreement}
    onChange={handleAgreementChange}
  />
 By entering your phone number you agree to be
  contacted via SMS for information, offers, and advertising.
  We will NEVER spam you and you can opt-out of our messages
  at any time. Message & data rates apply. Message frequency
  varies. I have read and agree to the Terms and Conditions,
  Consent to Electronic Communications, and the Company
  Privacy Notice.
</label>

Is there any kind of CSS trick I can use here in order to better wrap the text around the input, such that despite the input's height exceeding the 1st line's line-height, the 1st line will still be normally aligned to the top of the label?

So far I've made the input position:absolute; relative to the label, but that of course only takes it out of the flow completely.

Any pointers is greatly appreesh as always.

Screenshot_2024-05-08_at_10.57.50_AM.png

Make form label text wrap around embedded 'checkbox' input, or simulate that somehow?

The label:

<label className="agmt_label" htmlFor="agreement">
  <input
    // className="preApproval_input"
    type="checkbox"
    name="agreement"
    id="agreement"
    checked={formData.agreement}
    onChange={handleAgreementChange}
  />
 By entering your phone number you agree to be
  contacted via SMS for information, offers, and advertising.
  We will NEVER spam you and you can opt-out of our messages
  at any time. Message & data rates apply. Message frequency
  varies. I have read and agree to the Terms and Conditions,
  Consent to Electronic Communications, and the Company
  Privacy Notice.
</label>

<label className="agmt_label" htmlFor="agreement">
  <input
    // className="preApproval_input"
    type="checkbox"
    name="agreement"
    id="agreement"
    checked={formData.agreement}
    onChange={handleAgreementChange}
  />
 By entering your phone number you agree to be
  contacted via SMS for information, offers, and advertising.
  We will NEVER spam you and you can opt-out of our messages
  at any time. Message & data rates apply. Message frequency
  varies. I have read and agree to the Terms and Conditions,
  Consent to Electronic Communications, and the Company
  Privacy Notice.
</label>

Make form label text wrap around embedded 'checkbox' input, or simulate that somehow?

Similar Threads

Make form label text wrap around embedded 'checkbox' input, or simulate that somehow?

Similar Threads

Similar Threads

Similar Threads