Space Evenly only for the inputs of a form - html

Question

I am trying to create a flashcard system where users will see input on the left and right for the front and back of their cards.
I am trying to have the Label above, submit button below and the front and back inputs beside each other.
My attempts have results in all 4 being stacked ontop or beside each other. Is this something possible with html and css?
HTML
<div class="view_new_flashcard">
<form method="POST" action="'.newcard($conn).'">
<input type="hidden" name="PostID" value="'.$PostID.'">
<input type="hidden" name="MatchUserID" value="'.$UserID.'">
<label>Enter New Card Information</label>
<br><br>
<input type="text" name="FrontSide" placeholder="Front of Card">
<input type="text" name="BackSide" placeholder="Back of Card">
<br>
<br>
<button type="submit" name="addcard">Add New Card</button>
</form>
CSS
.view_new_flashcard {
display: flex;
justify-content: space-evenly;
box-sizing: border-box;
width: 100%;
padding: 5px;
}
.view_new_flashcard form {
width: 100%;
height: auto;
}
.view_new_flashcard input {
display: inline-block;
box-sizing: border-box;
border: 1px solid #eeeeee;
border-radius: 8px;
/* width: 100%; */
height: auto;
}
<div class="view_new_flashcard">
<form method="POST" action="'.newcard($conn).'">
<input type="hidden" name="PostID" value="'.$PostID.'">
<input type="hidden" name="MatchUserID" value="'.$UserID.'">
<label>Enter New Card Information</label>
<br><br>
<input type="text" name="FrontSide" placeholder="Front of Card">
<input type="text" name="BackSide" placeholder="Back of Card">
<br>
<br>
<button type="submit" name="addcard">Add New Card</button>
</form>
</div>

Answer 1

You could put the inputs in adiv with display: flex and use flex-grow: 1 on the input.
.view_new_flashcard {
display: flex;
justify-content: space-evenly;
box-sizing: border-box;
width: 100%;
padding: 5px;
}
.view_new_flashcard form {
width: 100%;
height: auto;
background: grey;
}
.view_new_flashcard input {
display: inline-block;
box-sizing: border-box;
border: 1px solid #eeeeee;
border-radius: 8px;
/* width: 100%; */
height: auto;
flex-grow: 1;
margin: 0 3px;
}
.view_new_flashcard .input-container {
display: flex;
}
<div class="view_new_flashcard">
<form method="POST" action="'.newcard($conn).'">
<input type="hidden" name="PostID" value="'.$PostID.'">
<input type="hidden" name="MatchUserID" value="'.$UserID.'">
<label>Enter New Card Information</label>
<br><br>
<div class="input-container">
<input type="text" name="FrontSide" placeholder="Front of Card">
<input type="text" name="BackSide" placeholder="Back of Card">
</div>
<br>
<br>
<button type="submit" name="addcard">Add New Card</button>
</form>
</div>