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.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

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