Custom component doesn't display label properly in FormLayout

Vaadin 14
I have created my custom component: DateTimePicker which basically

<label part="label">[[label]
]</label>
<div style="flex-direction: row;">
	<vaadin-date-picker id="date_picker" style="width: 46%"></vaadin-date-picker>
	<vaadin-time-picker id="time_picker" style="width: 46%"></vaadin-time-picker>
</div>

I prepared java class around this component and it’s working perfectly but when I try to add this component to FormLayout with the following setup:

formLayout.setResponsiveSteps(new FormLayout.ResponsiveStep("25em", 1), new FormLayout.ResponsiveStep("32em", 2), new FormLayout.ResponsiveStep("40em", 3));

all standard components: TextField, ComboBox etc. can display label properly but my component display the label inside itself instead of display it at the same place as standard component do.

Should my component expose any special properties or should implement specific interface?
Is there any tutorial that describes how create custom component that works with FormLayout and is displayed properly?

In attachment screenshot with the problem.

17849814.png
17849817.png

Have you tried to set the label position explicitly in the responsive step setup?

Something like formLayout.setResponsiveSteps(new FormLayout.ResponsiveStep("25em", 1, LabelPosition.TOP), ...)

Yes, I tried - it didn’t help.
I did some other workaround: I removed my own <label part="label">[[label] ]</label> and I just used label from my <vaadin-date-picker id="date_picker" style="width: 46%"></vaadin-date-picker> and this worked because it seems that FormLayout can operate on Labels from inside default vaadin components but not on the label you define (even if your label has part=label).
So my question still remains:

  1. Should my component expose any special properties or should implement specific interface?
  2. Is there any tutorial that describes how create custom component that works with FormLayout and is displayed properly?