submit button does not work after using display inline - css

Question

I don't know what else to do. I am a newbie and doing what I thought was
simple coding. I have tried everything including display:inline and
display:inline important;". I am trying to put the submit button on the
same line with the same style attributes (blue, white words, etc.).
Please help!
<form action="/action_page.php">
<input type="textarea" name="firstname" placeholder="Enter your address
to determine if we buy in your neighborhood" style=
"border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top: 1px solid #d6d4d4;
border-right: 1px solid #d6d4d4;
border-bottom: 1px solid #d6d4d4;
border-left: 1px solid #d6d4d4;
height: 52px;
width: 618px;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
color: #161616;
line-height: 1.1;
box-sizing: border-box;
font-family: open sans;
font-weight: 400;
text-align: left;
text-align-last: left;
font-size: 16px;
background-color: #fff;
background-image: none;
overflow: hidden;
box-shadow: 0 0 0 rgba(0,0,0,.5);">
<input type="submit" value="Get Started" style="font-weight: 400; line-
height: 3.1;
font-size: 13px;
color: #ffffff;
background-color: #12208e;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
height: 50px;
width: 160px;
padding-top: 0;
padding-right: 14px;
padding-bottom: 0;
padding-left: 14px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
color: #fff;
line-height: 1;
box-sizing: border-box;
font-family: open sans;
font-weight: 700;
text-align: center;
text-align-last: center;
font-size: 20px;
background-color: #12208e;
background-image: none;
overflow: hidden;
text-shadow: 1px 1px 1px #000;">
</form>

Answer 1

There are quite a few things that are causing errors with your code. First of all, to get your desired layout add in a div that wraps around the two input elements like so:
<div class="form-row">
<input type="textarea" name="firstname" placeholder="Enter your address to determine if we buy in your neighborhood" class="name-input">
<input type="submit" value="Get Started" class="btn-submit">
</div>
Apply these styles to that div to make the two input elements appear "on one-line":
.form-row {
display: flex;
flex-direction: row;
width: 100%;
font-weight: 400;
}
You also had a spelling mistake in the styles for your button, where you had line- height: 3.1;, however I removed that line as you were overriding it with another line-height rule further down.
html {
font-family: open sans;
}
.form-row {
display: flex;
flex-direction: row;
width: 100%;
font-weight: 400;
}
.name-input {
border-radius: 4px;
border: 1px solid #d6d4d4;
height: 52px;
width: 618px;
padding: 15px;
margin: 5px;
color: #161616;
line-height: 1.1;
box-sizing: border-box;
font-family: open sans;
text-align: left;
font-size: 16px;
background-color: #fff;
box-shadow: 0 0 0 rgba(0, 0, 0, .5);
}
.btn-submit {
color: #ffffff;
background-color: #12208e;
border-radius: 5px;
border: 0;
height: 50px;
width: 160px;
padding: 0 14px;
margin: 5px;
color: #fff;
line-height: 1;
box-sizing: border-box;
font-weight: 700;
text-align: center;
font-size: 20px;
text-shadow: 1px 1px 1px #000;
}
<form action="/action_page.php">
<div class="form-row">
<input type="textarea" name="firstname" placeholder="Enter your address to determine if we buy in your neighborhood" class="name-input">
<input type="submit" value="Get Started" class="btn-submit">
</div>
</form>
Note: Since you are setting a fixed width on those two elements, they won't fit on one line on very small screens, or if other elements are added to it.
I greatly recommend splitting your CSS into a separate CSS file like in this snippet. It will allow you to better see what is going on. Also if you use a decent IDE (code editor) it will pick up these errors for you as well.
Here are some resources you can use to learn more about CSS and HTML. Good luck!