In Bootstrap, why doesn't my text top align with the adjacent element?

Question

I have a fiddle here:

https://jsfiddle.net/bunhdsyL/

I'm following the documentation here:

https://getbootstrap.com/docs/4.0/utilities/vertical-align/

but my 'Text' label still isn't top aligned with the adjacent textarea element:

How do I top align the text with the textarea ?

Answer 1

Adding the .form-inline class add some things that get in the way of your css, including setting display:flex; and align-items:center on label elements when the screen is larger than the small breakpoint setting.

You can add this css to override that behavior:

.form-inline label {
   align-items: start !important;
}