Multiline label for FormLayout centering to control input

Flow
1

Hello,
i would like to use a label that expands over multiple lines in a FormLayout. But the alignment is quite off for this (see attachment). I tried to use css

align-self: center;

but i get the error message, that this element is not part of a flex layout from firefox.

I also tried to add the style directly to the “slot” element, and this seemed to work somehow. The label was more centered, but still way off. Also i do not really know how to modify the “slot” element for this single item. I suspect i have to use the shadow dom in the global styles?

My code is as following:

 <vaadin-form-layout style="width: 100%; height: 100%;">
  <vaadin-form-item>
   <label slot="label">Name</label>
   <vaadin-text-field class="full-width" value=" " id="Name" has-value></vaadin-text-field>
  </vaadin-form-item>
  <vaadin-form-item>
   <label slot="label" style="align-self: center;">MultiLine-<br>TestLabel</label>
   <vaadin-text-field class="full-width" value=" " id="test" has-value></vaadin-text-field>
  </vaadin-form-item>
  <vaadin-form-item>
   <label slot="label">Note</label>
   <vaadin-text-area class="full-width" value=" " id="note" has-value></vaadin-text-area>
  </vaadin-form-item>
 </vaadin-form-layout>

Any help would be great. Thank you.

System info:
Vaadin 14.1.3
Browser Firefox
18181190.png