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

i'm making webpage 1 of projects , i'm trying align upload buttons beside text field. maybe better explained picture. can see 2 buttons aligned on bottom left of submit button. want aligned on left of device id text field. i've tried setting display attributes text field, 2 buttons didn't work. tried setting float properties, didn't work. looking @ grids possibly use purecss.io, i'm not sure if fix problem. i've tried using vertical-align attribute, still no dough. i'm using plain bootstrap theme. html skills pretty basic coming java. know can here?

here main container:

<div class="container"> <!-- main content here -->   <div id="main">     <h1 id="mainheader">send image 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 upload:         <div id="filebutton">         <input type="file" name="filetoupload" id="filetoupload">         </div>         <input type="submit" value="upload image" name="submit">     </form> </div> 

here 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); /* light blue */     } 

here preview image: (having trouble uploading directly) http://tinypic.com/view.php?pic=1z499gw&s=8

edit: fixed applying "float:right" on first whole form, text area , button. there still huge horizontal between two.

#main {         float:right;     } 

#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); /* 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 image 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 upload:          <div id="filebutton">          <input type="file" name="filetoupload" id="filetoupload">  		</div>  	</form>              </div>

i think asking for.
rearranged html little , added couple of css rules.

by setting display on device id field , upload button inline instead of block got them on same line.

i used vertical-align to... well... align them. , gave them margin-top.

then floated second form left.