Checkbox and radio alignment differs with multiline labels

[Stefei]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

The alignment of checkboxes and radio inputs differs if the label is multiline. Checkboxes are centered on the label and radio inputs at the top of the label. It would be good if those share a consistent alignment, since we can't change the placement our self.

What type of frontend framework are you seeing the problem on?

Angular, JavaScript

Which version of iX do you use?

v2.1.0

Code to produce this issue.

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <br>
    <div style="display: flex; flex-direction: column">
      <input type="checkbox" id="checkbox_01" />
      <label for="checkbox_01">Long Label 1: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</label>
    </div>
    <br>
    <div>
      <input type="radio" id="radio_01" />
      <label for="radio_01">Long Label 2: Lorem ipsum dolor sit amet, consetetur sadipscing elitr</label>
    </div>
  `,
})
export default class Checkbox {}