✨ feat(form): horizontal layout for label and controls (#1169)

* Create PR for #1160

* chore(): horizontal align field label and input

* chore(): improve styling and add visual tests

* chore(): trigger build

* chore(): trigger build

* chore(): trigger build

* chore(): update base images

* feat(bal-field): Introduce 'horizontal' prop for aligning label and input side by side in Field component, with message displayed below

* chore(): update base images

* chore(): refactor

* chore(): align field control to the end when label is too long

* chore(): update base images

* chore(): refactor

* chore(): refactor

* chore(): refactor

* chore(): separate horizontal test

* chore(): add head element

* chore(): format

* chore(): update base images

* chore: trigger build

---------

Co-authored-by: mladenplaninicic <mladenplaninicic@users.noreply.github.com>
Co-authored-by: Mladen Planinicic <mladen.planinicic@baloise.ch>
Co-authored-by: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch>

.changeset/slow-parrots-argue.md

@@ -0,0 +1,15 @@
+---
+'@baloise/design-system-components': minor
+---
+
+Introduce 'horizontal' prop for aligning label and input side by side in Field component, with message displayed below.
+
+```html
+<bal-field horizontal>
+  <bal-field-label>Firstname</bal-field-label>
+  <bal-field-control>
+    <bal-input placeholder="Basic"></bal-input>
+  </bal-field-control>
+  <bal-field-message color="hint">Field Message</bal-field-message>
+</bal-field>
+```