Bulma: Horizontal form breaks if a label is long

[rogervila]

• if it's a bug, is it a browser bug? YES

• [X] This is about the Bulma CSS framework

• [X] I'm using Bulma version [0.2.3]
• [X] My browser is: Chrome 55, Firefox 50.1
• [X] I am sure this issue is not a duplicate?

Description

Horizontal form breaks if a label is long

Steps to Reproduce

1. _[First Step]_

<div class="control is-horizontal">
    <div class="control-label">
        <label class="label">
            Título
        </label>
    </div>
    <div class="control is-expanded">
        <input class="input" type="text" placeholder="">
    </div>
</div>
<div class="control is-horizontal">
    <div class="control-label">
        <label class="label">
            slug
        </label>
    </div>
    <div class="control is-expanded">
        <input class="input" type="text" placeholder="">
    </div>
</div>
<div class="control is-horizontal">
    <div class="control-label">
        <label class="label">
            Descripción
        </label>
    </div>
    <div class="control">
        <textarea class="textarea" placeholder=""></textarea>
    </div>
</div>

1. _[Second Step]_

The code is wrapped in a card

<div class="card is-fullwidth">
    <div class="card-content">
        <div class="content">

        <div class="columns">
            <div class="column">
               <!-- the form goes here -->

Expected behavior

Everything should be aligned

Actual behavior

[gmann1982]

Workaround for the time being I found:

Wrap the control-label element in

<div class="column is-paddingless is-3">
    <div class="control-label">
        <label for="email" class="label">E-Mail</label>
    </div>
</div>

where is-3 change this to your desired width.

[jgthms]

The new field element fixes this.

[chimit]

@jgthms so how to fix this? Still have this problem in 0.6.1 when the form is inside a column.