Trying to align upload button with a Textarea in HTML and CSS - html

Question

I'm making a webpage for one of my projects and I'm trying to align the Upload buttons beside a text field. Maybe better explained as a picture. You can see that the two buttons are aligned on the bottom left of the submit button. I want it to be aligned on the left of the device Id text field. I've tried setting the display attributes for the text field, as well as the two buttons but it didn't work. I tried setting the float properties, which also didn't work. I was looking at grids I could possibly use from Purecss.io, but I'm not sure if that would fix the problem. I've tried using vertical-align attribute, still no dough.
I'm using a plain bootstrap theme. My HTML skills are pretty basic coming from Java. Anyone know what I can do here?
Here is my main container:
<div class="container">
<!-- Main content here -->
<div id="main">
<h1 id="mainheader">Send an image to a Wearable device</h1>
<hr>
<form method="post" action="/gcm/gcm.php/?push=true" onsubmit="return checkTextAreaLen()">
<textarea id="deviceID" rows="1" name="message" cols="25" placeholder="Device ID"></textarea> <br/>
<button type="submit" id="mainbutton" class="button-xlarge pure-button">Send Image</button>
</form>
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<div id="filebutton">
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<input type="submit" value="Upload Image" name="submit">
</form>
</div>
Here are my styles
#main {
vertical-align: middle;
}
#status{
text-align: center;
background-color: #FFFFFF;
padding: 10px;
margin-top: 25px;
}
#mainheader{
margin-bottom: 20px;
text-align: center;
font-family: 'Raleway', sans-serif;
}
#deviceID {
display: block;
margin-left: auto;
margin-right: auto;
}
#mainbutton {
display: block;
margin-left: auto;
margin-right: auto;
}
.button-xlarge {
font-size: 125%;
width:350px;
background: rgb(66, 184, 221); /* this is a light blue */
}
Here is a preview image: (Having trouble uploading it directly)
http://tinypic.com/view.php?pic=1z499gw&s=8
EDIT:
I somewhat fixed this by applying "float:right" on the first whole form, the text area and the button. There is still a huge horizontal between the two.
#main {
float:right;
}

Answer 1

#main {
text-align: center;
}
#mainheader{
margin-bottom: 20px;
text-align: center;
font-family: 'Raleway', sans-serif;
}
#mainbutton {
display: block;
margin: 35px auto;
}
.button-xlarge {
font-size: 125%;
width:350px;
background: rgb(66, 184, 221); /* this is a light blue */
}
input[type="submit"], #deviceID {
display: inline;
vertical-align: middle;
margin-top: 35px;
}
.left{
float: left;
text-align: left;
}
<div id="main">
<h1 id="mainheader">Send an image to a Wearable device</h1>
<hr>
<form method="post" action="/gcm/gcm.php/?push=true" onsubmit="return checkTextAreaLen()">
<textarea id="deviceID" rows="1" name="message" cols="25" placeholder="Device ID"></textarea>
<input type="submit" value="Upload Image" name="submit">
<button type="submit" id="mainbutton" class="button-xlarge pure-button">Send Image</button>
</form>
<form class="left" action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<div id="filebutton">
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
</form>
</div>
i think this is what you are asking for.
i rearranged your html a little and added a couple of css rules.
by setting the display on the device id field and the upload button to inline instead of block i got them to be on the same line.
i used vertical-align to... well... align them. and gave them a margin-top.
then floated your second form to the left.