How could i set these buttons at the bottom of my div - html

Question

I'm trying to put those two buttons at the bottom but the vertical-align:bottom don't seem to have any effects.
Both blocks are in a class "login-card" and the blue stuff are buttons/submit inside this class.
Here is my css :
.login-card {
padding: 40px;
width: 400px;
height: auto;
background-color: #F7F7F7;
margin: 20px;
border-radius: 2px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.login-card input[type=text], input[type=password], input[type=email], inputs {
height: 44px;
font-size: 16px;
width: 100%;
margin-bottom: 10px;
-webkit-appearance: none;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
padding: 0 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.login-card input[type=submit], input[type=button] {
width: 100%;
display: block;
margin-bottom: 10px;
position: relative;
display: table-cell;
vertical-align: bottom;
}
Am i missing something obvious ?
EDIT, added Html :
<div class="col-sm-6">
<div class="login-card" id="firstCard">
<h1>Fill the Wheel</h1>
<form action="javascript:void(0);" name="members" onsubmit="rollIt()">
<div id="dynamicInput">
<input class="inputs" type="text" name="input1" placeholder='Type name' required>
<input class="inputs" type="text" name="input2" placeholder='Type name' required>
<input class="inputs" type="text" name="input3" placeholder='Type name' required>
</div>
<input type="button" id="addInput" class="login login-submit" value="Add a member">
<input type="submit" id="rollWheel" name="login" class="login login-submit" value="Roll the wheel!">
</form>
</div>
</div>

Answer 1

Your buttons are at the bottom of the form, their parent. You need to take the padding-bottom off of login-card or something like that to give the buttons room to move down.
Also, here is an answer to your problem with the right box
<div class="wrapper">
<button></button>
<button></button>
</div>
.logincard:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: bottom;
}
.wrapper {
display: inline-block;
vertical-align: bottom;
}