How can I align input field with the buttons?

[nemethmik]

Greetings from a new UI5 web components fan!
I have been building a POC for a (major) mobile application using UI5 web component, Vite, lit-html and Lit Element, everything works brutally excellently. I am very happy with this stack of tools, absolutely excellent.
Here is the part from my HTML that builds the bottom part:

And here is how it looks:

Here is a live version of the application lively-field-057f5c603.azurestaticapps.net/ and here is the repo
Could you advise, please?
Thank you so much, Miklos

[pskelin]

Hi Miklos,
thanks for the nice words, really glad to hear positive experiences.

The misalignment of the components has been reported a couple of times and we plan to improve the default alignment of the components. You can track the progress here:
#3492

Until we fix this, you can use the suggested solution of wrapping them in a div and styling them with dislay: flex and aligning them vertically with align-items: center; as suggested in this comment and the linked sample:
#3492 (comment)

It is a bit more code, but might be still necessary for a mixed case when you have other web components or even native elements that might also be misaligned.
Regards,
Peter

[nemethmik]

Thank You so much! Adding these flexbox lines is no problem, thank you for the hint, it's dead easy, I have corrected my experimental PoC app. Miklos