stack vertically inline input text html - html

Question

These input text are already stacked vertically but they're not in-line along with the other text. Image:[1]: https://i.stack.imgur.com/UicEL.png
#advanced input[type="text"] {
border-radius: 0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
width: 300px;
height: 15px;
padding: 5px 10px;
background-image: none;
font-size: 20px;
display: block;
margin-left: 30%;
}
<form action="https://google.com/search">
<div id="advanced">
Find pages with...<br/><br/>
all these words:<input type="text" name="as_q">
this exact word or phrase:<input type="text" name="as_epq">
any of these words:<input type="text" name="as_oq">
none of these words:<input type="text" name="as_eq">
</div>
<input type="submit" value="Advanced Search">
</form>
What made it stack vertically was exactly the code:
display: block;
margin-left: 30%;

Answer 1

This looks to have been answered previously HERE - something like this might work for you, adding display:grid to the parent element.
#advanced input[type="text"] {
border-radius: 0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
width: 300px;
height: 15px;
padding: 5px 10px;
background-image: none;
font-size: 20px;
margin-left: 30%;
vertical-align:top;
}
#advanced {
display:grid;
grid-template-columns: max-content max-content;
grid-gap:10px;
}
#advanced.settings label { text-align:left; }
#advanced.settings label:after { content: ":"; }
<form action="https://google.com/search">
Find pages with...<br/><br/>
<div id="advanced">
all these words:<input type="text" name="as_q">
this exact word or phrase:<input type="text" name="as_epq">
any of these words:<input type="text" name="as_oq">
none of these words:<input type="text" name="as_eq">
</div>
<input type="submit" value="Advanced Search">
</form>