(multiline) Button

[Syphe]

hi leute,

ich bin dabei mir buttons zu gestalten und will auch teilweise multiline (2 zeilige) buttons haben. es sind <button> mit <span> als text container.
das problem ist das die buttons einschränken will, also max-width.
aber sobald ich max-width auf button oder span setze zerspringen die positionen der buttons.
hab schon mit display und anderen elementen als span rum experimentiert, aber alle lösen das gleiche aus daher denke ich das es am button liegt.

hab das zur demonstration auch mal hochgeladen:
http://demo.syphe.de/button/button.html

wäre echt super wenn mir da jemand weiterhelfen kann.

<button class="left_round_button">
            <span class="button_caption">
                Abschicken
            </span>
        </button>
        <button class="right_round_button multi_line">
            <span class="button_caption max_width_100">
                Abschicken
                Abschicken
            </span>
        </button>

button.left_round_button{
    border-bottom-left-radius: 9px;
    border-top-left-radius: 9px;
}
button.right_round_button{
    border-bottom-right-radius: 9px;
    border-top-right-radius: 9px;
}

button{
    border: 1px solid black;
    padding: 0px;
    margin: 0px;
    height: 35px;
}

button.left_round_button .button_caption,
button span{
    padding: 7px;
    display: inline-block;
    max-width: 200px;
}

button.multi_line span{
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.max_width_100{
    max-width: 100px;
}

[wahsaga]

button { vertical-align:bottom; /*oder irgendein anderer der zulässigen Werte */ }

[Syphe]

so simpel und ich komm nicht drauf

danke wahsaga