How to vertically stack elements inside a column with Bulma?

Question

This is a very simple question - but I can't figure it out from reading the Bulma docs.

I have the following layout:

<div class="columns is-mobile">
    <div class="column">
        <textarea></textarea>
        <button></button>
    </div>
    <div class="column">
        <div></div>
    </div>
</div>

I want the textarea and button to stack vertically instead of horizontally. I know I can use the display: block attribute to achieve the correct behavior - but considering Bulma is based on flexbox, I would think there is a better way to vertically align elements using flexbox based attributes. I tried setting flex-direction to column in the root element, but it didn't work.

Answer 1

Bulma takes care of that with .textarea class.

Solution based on Bulma:
Add .textarea class in textarea tag.

<div class="columns is-mobile">
    <div class="column">
        <textarea class="textarea"></textarea>
        <button>Click me</button>
    </div>
    <div class="column">
        <div></div>
    </div>
</div>

Alternative:
Add these CSS attributes to your textarea:

display:flex;
flex-direction:column;

A good practice is:
Form tags should be wrapped in a .control container.
When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.

<div class="field">
  <div class="control">
  <textarea class="textarea"></textarea>
  <button>Click me</button>
  </div>
</div>