Bigger margin, when paragraph is more than one line - html

Question

I have created a site, where people can come and create their own quiz questions. Later, they will be able to see these questions.
html,
body,
div {
margin: 0;
padding: 0;
font-size: 1.2vw;
font-family: Arial, sans-serif;
}
a {
text-decoration: none;
color: inherit;
}
a:hover,
li:hover {
background-color: black;
color: white;
}
.action {
display: inline-block;
font: inherit;
font-size: 1.8vw;
padding: 0.5% 2% 0.5% 2%;
background-color: #ffffff;
text-align: center;
border-color: black;
border-style: solid solid solid solid;
border-radius: 0.5em 0.5em 0.5em 0.5em;
border-width: 0.15em;
margin: 2% 2% 0% 2%;
}
#content_question {
text-align: center;
position: fixed;
display: block;
left: 16%;
right: 34%;
width: 48%;
top: 15%;
bottom: 5%;
}
.question_fields {
display: inline-block;
padding: 2% 4% 2% 4%;
font: inherit;
color: white;
text-align: center;
background-color: black;
border-color: black;
border-style: solid solid solid solid;
border-radius: 0.5em 0.5em 0.5em 0.5em;
border-width: 0.15em;
font-size: 1.8vw;
resize: none;
outline: none;
}
#question {
width: 90.5%;
height: 21.2%;
}
.question_fields.answers {
display: inline;
width: 40.3%;
margin-top: 0.5%;
font-size: 1.5vw;
background-color: #ea5400;
color: black;
}
#right_answer {
background-color: #008000;
}
#source {
background-color: white;
width: 90.5%;
}
#create_question {
display: block;
margin: 1.5% auto 0% auto;
}
#create_question:hover {
background-color: black;
color: white;
}
.show_question_fields {
display: inline-block;
font: inherit;
text-align: center;
border-color: black;
border-style: solid solid solid solid;
border-radius: 0.4em 0.4em 0.4em 0.4em;
border-width: 0.15em;
font-size: 1.8vw;
}
#show_question {
color: white;
background-color: black;
width: 98.5%;
height: 26.2%;
border-radius: 0.5em 0.5em 0.5em 0.5em;
margin-bottom: 0.3%;
}
.show_question_fields.answers {
color: black;
background-color: #ea5400;
width: 47.8%;
height: 22.3%;
margin-top: 0.5%;
margin-bottom: 0.35%;
margin-right: 0.35%;
margin-left: 0.4%;
}
.show_question_fields.source {
color: black;
background-color: white;
width: 98.5%;
height: 13.6%;
margin-top: 0.5%;
margin-bottom: 0.4%;
}
#show_right_answer {
background-color: #008000;
}
HTML looks like that:
<div id="content_question">
<div id="show_question" class="show_question_fields">
<p>
Question
</p>
</div>
<div id="show_right_answer" class="show_question_fields answers">
<p>
Right Answer</br>
Right Answer Part 2
</p>
</div>
<div class="show_question_fields answers">
<p>
Answer 2
</p>
</div>
<div class="show_question_fields answers">
<p>
Answer 3
</p>
</div>
<div class="show_question_fields answers">
<p>
Answer 4
</p>
</div>
<div class="show_question_fields source">
<p>
Source
</p>
</div>
To Main Page
Back
</div>
As you can see, margin-bottom under an answer field is bigger, when the answer consists of two or more lines. That should not be the case.
Can anybody help me fix this issue? I already tried changing margin, line-height and padding, but it won't help.

Answer 1

Just add vertical-align: top to your "show_question_fields" class:
.show_question_fields {
display: inline-block;
font: inherit;
text-align: center;
border-color: black;
border-style: solid solid solid solid;
border-radius: 0.4em 0.4em 0.4em 0.4em;
border-width: 0.15em;
font-size: 1.8vw;
vertical-align: top;
}